[NextJS] Server side rendering

SSR(서버 측 렌더링)은 웹 페이지를 브라우저에서 렌더링 하는 대신에, 서버에 표시하여 기여할 수 있는 응용 프로그램의 기능입니다. 서버 측에서는 완전히 렌더링 된 페이지를 클라이언트에 보냅니다. 클라이언트의 JavaScript 번들이 인계받아 Vue.js 앱이 'hydrate'되도록 합니다.

 

Server-side rendering (출처: blog.vuestorefront.io)

---

Node.js 서버 필요

웹 페이지를 렌더링하려면 JavaScript 환경이 필요합니다.

Vue.js 애플리케이션을 실행하려면 Node.js 서버를 구성해야 합니다.

 

서버 확장 및 제어

serverMiddleware로 서버를 확장하고 미들웨어로 경로를 제어할 수 있습니다.

server-middleware/logger.js

export default function (req, res, next) {
  console.log(req.url)
  next()
}

nuxt.config.js

export default {
  serverMiddleware: ['~/server-middleware/logger']
}

 

Nuxt를 사용한 Server-side rendering 단계

Step 1: 브라우저에서 서버로

브라우저가 초기 요청을 보내면 Node.js 내부 서버에 도달합니다. Nuxt는 HTML을 생성하고 실행된 기능의 결과와 함께 브라우저로 다시 보냅니다. 예) asyncData, nuxtServerInit 또는 fetch)

Hooks 기능도 실행됩니다.

 

Step 2: 서버에서 브라우저로

브라우저는 생성된 HTML이 있는 서버로부터 렌더링 된 페이지를 수신합니다. 콘텐츠가 표시되고 Vue.js 'hydration'이 시작되어 반응형이 됩니다. 이 프로세스 후에, 그 페이지는 상호작용하는 대화형이 됩니다.

 

Step 3: 브라우저에서 브라우저로

<NuxtLink>를 사용하여 페이지 간 탐색은 클라이언트 측에서 수행되므로, 브라우저를 새로고침 하지 않는 한 서버에 다시 요청하지 않습니다.

 

주의사항

window 또는 document가 정의되지 않음

이것은 Server-side rendering이기 때문입니다. 클라이언트 측에서만 리소스를 가져오도록 지정해야 하는 경우 process.client 변수를 사용해야 합니다.

 

예) .vue

if (process.client) {
  require('external_library')
}

 

 

iOS 및 전화번호

일부 모바일 Safari 버전은 자동으로 전화번호를 링크로 변환합니다. SSR 콘텐츠가 더 이상 웹사이트 콘텐츠와 일치하지 않으므로 NodeMismatch 경고가 트리거 됩니다. 이렇게 하면 이러한 Safari 버전에서 앱을 사용할 수 없게 될 수 있습니다.

Nuxt 페이지에 전화번호를 포함하는 경우 두 가지 옵션이 있습니다.

 

메타 태그를 사용하여 변환 중지

<meta name="format-detection" content="telephone=no" />

 

링크에 전화번호 줄 바꿈

<!-- Example phone number: +7 (982) 536-50-77 -->

<template>
  <a href="tel: +7 (982) 536-50-77">+7 (982) 536-50-77</a>
</template>

 

출처: https://nuxtjs.org/docs/concepts/server-side-rendering

Server Side Rendering