![\"Vue](\"/assets/vue-logo.png\" "\\"Vue"){kind=logo}
서버 사이드 렌더링이란 서버에서 페이지를 렌더링후 클라이언트(브라우저)로 보내 화면에 표시하는 기법을 의미한다. 뷰 싱글 페이지 애플리케이션을 서버 사이드 렌더링의 반대인 클라이언트 사이드 렌더링 방식이다.
\nHTML, JS, CSS 만 서버에서 받고 사용자에게 보여줄 데이터를 포함한 UI는 클라이언트에서 랜더링후 화면에 표시 한다.
\nHTML, JS, CSS 및 화면에 표시해줄 데이터를 포함한 UI를 서버에서 랜더링하여 클라이언트 화면에 표시 한다.
\n![\"Vue](\"/assets/vue-ssr-vs-csr2.png\" "\\"Vue")
위 예시를 보면 SSR 의 경우 Main 이 소스코드 보기에서 보이고, CSR 의 경우 Main 이 소스코드 보기에서 보이지 않는다.\n이유는 SSR는 서버에서 렌더링 되었기 때문에 Main 이 보이는것이고 CSR 은 브라우저에서 아직 랜더링이 되지 않았기 때문에 Main 이 보이지 않는 것이다.
\n![\"Vue](\"/assets/vue-ssr-vs-csr.png\" "\\"Vue")
서버 사이드 렌더링을 쓰는 목적은 크게 “검색 엔진 최적화”와 “빠른 페이지 렌더링”이다. 검색 엔진 최적화란 구글, 네이버, 다음과 같은 검색 사이트에서 검색했을 때 결과가 사용자에게 많이 노출될 수 있도록 최적화 하는 기법이다. 특히, SNS에서 링크를 공유했을 때 해당 웹 사이트의 정보를 이미지와 설명으로 표시해주는 OG(Open Graph) Tag를 페이지 별로 적용하기 위해서는 서버 사이드 렌더링이 효율적이다.
\n![\"Vue](\"/assets/og-tags-1.png\" "\\"Vue")
![\"Vue](\"/assets/og-tags-2.png\" "\\"Vue")
서비사이드 렌더링 사용 목적을 보면 서버 사이드 렌더링이 좋다고 생각 될것이다. 하지만 서버 사이드 렌더링을 하기전에 주의해야 할 점이 있다. 서버 사이드 렌더링은 Node.js 웹 애플리케이션 실행 방법을 알아야하고 서버쪽 환경 구성과 함께 클라이언트, 서버 빌드에 대한 이해가 필요하다. 따라서, 프론트엔드 개발 입문자 입장에서는 진입이 어렵다 그리고 Node.js 환경에서 실행되기 때문에 브라우저 관련 API를 다룰 때 주의해야 한다. 뷰 싱글 페이지 애플리케이션의 라이프 사이클 훅과는 다른 환경(브라우저가 아닌 Node.js)에서 동작하기 때문에 beforeCreate와 created에서 window나 document와 같은 브라우저 객체에 접근할 수 없다. ( beforeMount나 mounted에서 window와 document를 접근할 수 있다 )
\nNuxt.js는 Vue.js 응용 프로그램을 만들기 위한 Framework이며, Vue.js Application을 좀 더 손쉽게 만들 수 있으며 Server-Side-Rendering을 지원한다.
\nnpm 을 통한 프로젝틑 셋팅
\nnpm init nuxt-app@latest <my-project>cd my-project\nnpm run dev![\"Nuxt](\"/assets/nuxt-run-dev-1.png\" "\\"Nuxt")
![\"Nuxt](\"/assets/nuxt-run-dev-2.png\" "\\"Nuxt")
npm run dev 실행 하면 서버에서 렌더링 과정을 거치게 되고, 렌더링후 서버가 실행 되면 브라우저에서 확인할수 있다.
![\"Nuxt](\"/assets/nuxt-index.png\" "\\"Nuxt")
외부 API 를 활용하여 서버에서 API 를 요청하고 요청한 결과를 렌더링된 HTML 에 포함시키는 간단한 코드를 작성해 보자
\nnuxt/axios 를 설치 한다.
\nnpm install @nuxtjs/axiosnuxt.config.js 에 axios module 설정을 해준다.
\nexport default {\n modules: [\n '@nuxtjs/axios',\n ],\n axios: {\n baseURL: 'https://testrestapi.cafe24.com',\n },\n}pages/index.vue 에 axios 를 활용하여 sample api 를 요청 하는 코드를 작성 한다.
\n<template>\n <div>{{ sample }}</div>\n</template>export default {\n async asyncData({ $axios }) {\n const sample = await $axios.$get(`/api/sample/sample`)\n return { sample }\n },\n}실행 결과 화면은 아래와 같다.
\n![\"Nuxt](\"/assets/nuxt-index-2.png\" "\\"Nuxt")
npm 을 통한 초기화
\nnpm initname 은 vue-ssr 로 입력 하자. 아래는 npm 으로 초기화한 package.json 이다.
{\n \"name\": \"vue-ssr\",\n \"version\": \"1.0.0\",\n \"description\": \"\",\n \"main\": \"index.js\",\n \"scripts\": {\n \"test\": \"echo \\\"Error: no test specified\\\" && exit 1\"\n },\n \"author\": \"\",\n \"license\": \"ISC\"\n}vue,vue-server-renderer 를 설치 한다.
npm install vue vue-server-renderer --savepackage.js 에서 설치된 vue, vue-server-renderer 를 확인 한다.
\n\"dependencies\": {\n \"vue\": \"^2.6.12\",\n \"vue-server-renderer\": \"^2.6.12\"\n}server.js 파일 생성후 vue 를 서버에서 랜더링 해보도록 하겠다.
\n// server.js\n\n// Vue 인스턴스 생성\nconst Vue = require(\"vue\")\nconst app = new Vue({\n template: `<div>Hello World</div>`,\n})\n\n// 렌더링\nconst renderer = require(\"vue-server-renderer\").createRenderer()\n\n// Vue 인스턴스를 HTML로 렌더링\nrenderer.renderToString(app, (err, html) => {\n if (err) throw err\n console.log(html)\n // => <div data-server-rendered=\"true\">Hello World</div>\n})\n\nrenderer\n .renderToString(app)\n .then(html => {\n console.log(html)\n })\n .catch(err => {\n console.error(err)\n })위와 같이 server.js 파일 생성후 코드를 작성한뒤 아래와 같이 터미널에 입력 해보도록 하자
\nnode server.js![\"server.js](\"/assets/vue-ssr-server-1.png\" "\\"server.js")
Vue 인스턴스 생성후 HTML 랜더링된 HTML 코드가 콘솔로 찍히는걸 확인 할수 있다.\n여기서 node 는 node 로 server.js 파일을 실행해라 하는 의미 이다.
\n이제 서버사이드에서 Vue가 랜더링되는걸 확인 했으니 Express.js 를 설치하여 Express.js 프레임워크에서 Vue 가 랜더링 되도록 해볼것 이다.
\nExpress.js 는 웹 애플리케이션, API 개발을 위해 설계되었고. Node.js의 표준 서버 프레임워크 라고 할수 있다.
\n아래와 같이 npm 을 사용해서 Express.js 를 설치 한다.
\nnpm install express --save{\n \"name\": \"vue-ssr\",\n \"version\": \"1.0.0\",\n \"description\": \"\",\n \"main\": \"index.js\",\n \"scripts\": {\n \"test\": \"echo \\\"Error: no test specified\\\" && exit 1\"\n },\n \"author\": \"\",\n \"license\": \"ISC\",\n \"dependencies\": {\n \"express\": \"^4.17.1\",\n \"vue\": \"^2.6.12\",\n \"vue-server-renderer\": \"^2.6.12\"\n }\n}설치가 완료 되었으면 Express.js 를 실행해 보도록 하자
\n아래와 같이 server.js 에 아래와 같은 코드를 입력 한다.
\nconst Vue = require(\"vue\")\nconst server = require(\"express\")()\nconst renderer = require(\"vue-server-renderer\").createRenderer()\n\nserver.get(\"*\", (req, res) => {\n const app = new Vue({\n data: {\n url: req.url,\n },\n template: `<div>The visited URL is: {{ url }}</div>`,\n })\n\n renderer.renderToString(app, (err, html) => {\n if (err) {\n res.status(500).end(\"Internal Server Error\")\n return\n }\n res.end(`\n <!DOCTYPE html>\n <html lang=\"en\">\n <head><title>Hello</title></head>\n <body>${html}</body>\n </html>\n `)\n })\n})\n\nserver.listen(8080)Express.js 를 실행해 보자 server.listen(8080) 은 8080 포트로 node 서버를 실행하겠다는 의미 이다.
node server.js![\"server.js](\"/assets/vue-ssr-express-1.png\" "\\"server.js")