Support Online
MirrorLooking Glass
GenixNodeGenixNode
Client Panel
Skip to main content

SEO Friendly Application Development with Nuxt.js and SSR

What Will You Learn in This Guide?​

In this guide, you will learn the logic of server-side rendering (SSR) with Nuxt.js.
You will see how to solve SEO problems in SPA applications.
You will manage dynamic routes, layout structure and page-based SEO.

Technical Summary​

  • Problem: SPA applications are poor at SEO
  • Solution: Using SSR with Nuxt.js
  • Result: Browsable HTML from the server

Why Should We Use SSR?​

1. Browsers run JavaScript. 2. Search engines crawl HTML. 3. SSR generates content on the server.

  • In this way, search engines see the entire page.

Prerequisites​

Before you start, just the following:

  • Node.js 16.14.0 or later
  • Basic knowledge of Vue.js and JavaScript
  • Terminal usage experience

1️⃣ Creating a Nuxt.js Project​

  1. Start a new Nuxt project from the terminal.
npx create-nuxt-app genixnode-havalimani-rehberi
  • This command creates the Nuxt.js project structure.
  • Select the following options during installation:

1. Programming language: JavaScript

2. UI framework: Tailwind CSS

3. Rendering mode: Universal (SSR)

4. Deployment target: Server

- Run the project:


cd genixnode-havalimani-rehberi
npm run dev

2️⃣ Creating a Local Data Source​

  1. We prepare sample data for dynamic pages.

mkdir data

// data/havalimanlari.js
export default [
  { isim: "İstanbul Havalimanı", kod: "IST", sehir: "İstanbul" },
  { isim: "Esenboğa Havalimanı", kod: "ESB", sehir: "Ankara" },
  { isim: "Adnan Menderes Havalimanı", kod: "ADB", sehir: "İzmir" }
]
  • This data will be used in page production with SSR.

3️⃣ Automatic Route Creation with Nuxt​

  1. Nuxt generates routes based on the pages folder.
  2. There is no need for additional router file.

Static Page​


<!-- pages/hakkimizda.vue -->
<template>
  <div>
    <h1>Hakkımızda</h1>
    <p>Bu proje Nuxt.js SSR örneğidir.</p>
  </div>
</template>
  • /about us path is created automatically.

4️⃣ Using Dynamic Route and asyncData​

  1. Dynamic pages are defined by _param.vue.

<!-- pages/havalimani/_kod.vue -->
<script>
import havalimanlari from '~/data/havalimanlari.js'

export default {
  asyncData(&#123; params &#125;) {
    const secilen = havalimanlari.find(
      h => h.kod === params.kod.toUpperCase()
    )
    return &#123; secilen &#125;
  }
}
</script>
  • asyncData runs on the server side.

Common Page Structure with ### 5️⃣ Layout

  1. Layout is used for repeated areas.

<!-- layouts/DetayLayout.vue -->
<template>
  <div>
    <aside>{{ havalimani.sehir }}</aside>
    <main><Nuxt /></main>
  </div>
</template>

layout: 'DetayLayout'
  • Embeds nuxt/page content.

6️⃣ Dynamic SEO Meta Tags​

  1. Thanks to SSR, meta tags are generated on the server.

head() {
  return {
    title: `${this.secilen.isim} | Havalimanı Bilgileri`,
    meta: [
      {
        hid: 'description',
        name: 'description',
        content: `${this.secilen.sehir} şehrindeki ${this.secilen.isim} hakkında bilgiler`
      }
    ]
  }
}
  • This information is critical for search engines.

❓ Frequently Asked Questions​

1. Why is asyncData important for SEO? Data is prepared on the server.

2. How is it different from data? data runs in the browser.

3. What does Layout provide? Reduces code repetition.

4. Can it be Nuxt SPA? Yes, SSR can be turned off.

Result​

In this guide you used SSR with Nuxt.js. You have created SEO compatible dynamic pages. You learned layout and meta management.

You can try the GenixNode infrastructure now to publish your Nuxt.js projects with powerful servers.