Next.jsのGetServerSidePropsの挙動について

2022/02/11 2022/02/11 #プログラミング #Next.js

Next.jsのGetServerSidePropsの挙動について

こんにちは。のんです。

Reactは書いたことあるのですが、Next.jsは触ったこと無かったので入門しました。
今回はそこで発見したわかりにくい仕様について備忘録ついでに記事にしたいと思います。

メモ程度で終わってしまいますがご了承ください。

Next.jsのSSGとSSR。前置き。

Next.jsはPreRenderingServerSideRenderingの2つをサポートしています。

クローラーBotのことなどを考えると、SSR一択かもしれんな。と公式からの回答もあるようにSSR推奨気味ではあるものの、それをどのように動作確認すれば良いものやら試行錯誤していました。

自分的には右クリックからでる「ページのソースを確認」でHTMLの内容が表示されていればSSRできていると考えています。

スクリーンショット 2022-02-14 7.01.11.png

デフォルトの設定だとSSRできていないようで、どこで切り替えられるのかと調査していました。
Nuxt.jsとは違い設定にSSRモードのフラグ管理も無いようなので、発見時にはなるほど〜といった感想です。

GetServerSidePropsの挙動について

結論としてはGetServerSidePropsの関数をexportしてやる必要がありました。

SSRの処理がない場合でも宣言することでSSRできるようになります。

ここが重要なようで、別段SSR時に特別なfetch処理がない場合でもこいつを宣言することでSSRが可能になるようです。

こんな感じ。(省略とかしてない本当のコード)

import {GetServerSideProps, NextPage} from "next";
import {useRouter} from "next/router";

const Article: NextPage = () => {
  const router = useRouter();
  const { id } = router.query;

  return (
    <div>
      <p>articles</p>
      <p>{id}</p>
    </div>
  );
};

export const getServerSideProps: GetServerSideProps = async (context) => {
  return {
    props: {},
  };
};

export default Article;

このgetServerSidePropsの部分。

処理もしていないし、propsも渡していませんが、このページをSSRするために宣言しています。

いや、そんなことする必要あるの?という話ですが、jsでレンダリングされる以上クローラーに検知され易くするためには必要な処置だと考えています。

具体的な例を書くとこのようになります。

import {GetServerSideProps, NextPage} from "next";
import {useRouter} from "next/router";

const Article: NextPage = () => {
  const router = useRouter();
  const { id } = router.query;

  return (
    <div>
      <p>articles</p>
      <p>{id}</p>
    </div>
  );
};

// SSRされないようにコメントアウト
// export const getServerSideProps: GetServerSideProps = async (context) => {
//   return {
//     props: {},
//   };
// };

export default Article;

とすると、

const router = useRouter();
const { id } = router.query;

で取得した

<p>{id}</p>

の部分がSSRされません。

スクリーンショット 2022-02-14 7.13.30.png

このコメントアウトをもとに戻すと...

スクリーンショット 2022-02-14 7.14.57.png

とSSRされます。

これは

const router = useRouter();
const { id } = router.query;

がjsの処理であり、PreRenderingされているためソースレベルではhtmlとして出力されていないからだと考えます。

なので、全てをしっかりクローラーに判断してもらうためには、何も処理がなくてもいいので

export const getServerSideProps: GetServerSideProps = async (context) => {
  return {
    props: {},
  };
};

を書いておこうということを発見しました。

最後に

正直、普段触っている方からしたら「何を今更。」という話かもしれませんが、Nuxt.jsユーザーからすると結構珍しいことだったのでメモ程度に記事にさせていただきました。

この「のんラボ」もそろそろ一新するタイミングかなぁ〜と考えています。そのときにはNext.jsを使って一新したいです。

あと、技術記事にするときに「わからなかったこと」や「わかりにくいこと」を中心に記事にしてきましたが、ブログのネタに困ることが多くなってきたので、垂れ流し形式変更しようかなと思い始めています。

まぁこのへんはゆるく考えます。

また記事を書きますので、その時はよしなに。

.

のん

所属 : 株式会社スマレジ 開発部

YouTube : のんラボ

Twitter : @nonz250

Github : nonz250

Qiita : @nonz250

My Qiita posts My Qiita contributions My Qiita followers

主にPHPを使用し、サーバーサイドを担当。最近はフロントにも興味津々。

なにかを作ったりいじったりするのが好きで、個人開発なども行っている。

趣味はバイクアイコン画像は大抵愛車の「Z250」である。友達にアイコン描いてもらえて嬉しい。

PHP / Laravel / CakePHP2 / CakePHP3 / Vue / Nuxt / C# / etc...

Tags

#のんラボ #Laravel #Vue #個人開発 #ブログ #プログラミング #javascript #Html5 #WEBサービス #Twitter #今年の抱負メーカー #勉強方法 #PWA #モバイルアプリ #Android #ツーリング #バイクに乗るエンジニア #Z250 #秋吉台 #能登半島 #バイク #冒険 #東尋坊 #Squid #リバースプロキシ #hosts #axios #cropper #AdSense #Bootstrap #MySQL #高速化 #トドTask #Telescope #デバッグ #composer #テスト #セキュリティ #POSレジ #スマレジ #本部機能 #バリデーション #入力チェック #Mac #Chrome #テスト駆動開発 #開発手法 #UI #デザイン #WEBサイト #機能美 #PHP #Laravel 6 #コメント #バージョンアップ #vue-cli #localhost #BIツール #売上分析 #TANAX #MFK250 #ツアーシェルケース2 #RESTful #API #REST API #実務的 #PHP Tech Tutor #Smaregi Tech Talk #勉強会 # ブログ #CakePHP3 #CSRF #VSCode #開発環境 #CakePHP3.0 #さくらのレンタルサーバー #モジュールモード #シェル #メール #Gmail #relay #OGP #エラーページ #抱負 #家庭教師 #ドメイン駆動設計 #DDD #読書会 #那智の滝 #伊勢志摩 #伊勢志摩スカイライン #フロント #三方五湖 #レインボーライン #ボーイスカウト・ルール #プログラマが知るべき97のこと #リファクタリング #ユビキタス言語 #車輪の再発明 #マイクロサービス #デプロイ #QA #laravel-mix #Tips #storybook #@storybook/addon-actions #昇降デスク #コードレス #書斎 #オフィス #リモートワーク #働き方 #エラーハンドリング #スマレジ4 #pixel 5 #レビュー #スマレコ #TDD #RSS #404 #高山ダム #ラーツー #React #Nuxt #node_modules #エラー #インポート #設定方法 #環境構築 #Docker #フォレストパーク神野山 #学生向け #PR #採用 #Node.js #npm #しまなみ海道 #youtube #CSS #IE #SLA #Rust #千里浜なぎさドライブウェイ #千里浜 #インサイドセールス #曽爾高原 #無線LAN #ポートフォリオ #バルカンS #納車 #Next.js #チームビルディング #リーダー #悩み #Github Actions #Marp #ネタ #サーバー移行 #S3 #ストレージサーバー #RFC 7807 #Digest #認証 #Xdebug