Next.js で React の Server-side Rendering と Static Generation をやる #1

なぜこれを勉強しようと思ったか

この記事がたまたま twitter にの記事が流れてきたので読んだ

qiita.com

React SSR とかやらなきゃなーと思って、やるなら Next.js かなーと思った。

React の Server-side Rendering 技術は重要

React での Server-side Rendering は、かなり重要な技術なので、学んでいきたいと思い、 Next.js を触ろうと思った。

Next は Server-side Rendering ではなく Static Generation

そこで調べてみると、この記事を見つけた。

qiita.com

この記事を全部読むには、それなりに React や Next の知識が必要だと思うが、重要なのは、

Next は、SSR するためのフレームワークではない。むしろ、 Static Generation のほうがメインである。

というところである。

React で動的なページを作成すると SEO 面に問題を抱えるので、サーバーサイドでページを生成するのが Server-side Rendering である。

Static Generation は Server-side Rendering とは違い、完全に静的なページを配信するものである。

• Server-side Rendering は、ユーザーからリクエストが来た時に、サーバーサイドでページを生成する
• Static Generation は、ユーザーからリクエストが来る前にページを生成しておく

以前は、静的ページを React で作るための Gatsby のほうが優れていたが、今や Next にも Static Generation が入ったので、全部 Next で良くない？という感じである。

んで、Next で Server-side Rendering と Static Generation を学ぼうということになる。

Next.js を動かす準備

今回は Next.js 公式にあるチュートリアルをやっていく

Next.js 公式ページ

nextjs.org

Start Learning からチュートリアルが始まる

nextjs.org

僕の Mac には node 12 がインストールされているので、それで create-next-app をする。

$ node --version
v12.3.1

$ npx --version
6.14.4

$ npx create-next-app nextjs-blog --use-npm --example "https://github.com/vercel/next-learn-starter/tree/master/learn-starter"

$ cd nextjs-blog

これ以降は Docker でやっていこうと思うので、docker-compose.yml を用意。これでPCのnodeのバージョン管理に悩まなくて済む。

version: "3"
services:
  node:
    image: "node:15.8-buster"
    volumes:
      - ".:/opt/nextjs-blog"
    tty: true
    command: ["bash", "-c", "cd /opt/nextjs-blog && npm run dev"]
    ports:
      - "3000:3000"

docker-compose up -d して 127.0.0.1:3000 して表示できることを確認。

あと、必要に応じて .editorconfig も用意しておく。

[*.{js,jsx,css}]
indent_style = space
indent_size = 2

次回

今回はここまでで、次回は実際にページを作成していったりします。

Server-side Rendering や Static Generation まではもうちょっとかかるのじゃ

www.utakata.work