Next.jsのGetServerSidePropsの挙動について
2022/02/11 2022/02/11 #プログラミング #Next.jsNext.jsのGetServerSidePropsの挙動について
こんにちは。のんです。
Reactは書いたことあるのですが、Next.jsは触ったこと無かったので入門しました。
今回はそこで発見したわかりにくい仕様について備忘録ついでに記事にしたいと思います。
メモ程度で終わってしまいますがご了承ください。
Next.jsのSSGとSSR。前置き。
Next.jsはPreRenderingとServerSideRenderingの2つをサポートしています。
クローラーBotのことなどを考えると、SSR一択かもしれんな。と公式からの回答もあるようにSSR推奨気味ではあるものの、それをどのように動作確認すれば良いものやら試行錯誤していました。
自分的には右クリックからでる「ページのソースを確認」でHTMLの内容が表示されていればSSRできていると考えています。
デフォルトの設定だと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されません。
このコメントアウトをもとに戻すと...
と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
主にPHPを使用し、サーバーサイドを担当。最近はフロントにも興味津々。
なにかを作ったりいじったりするのが好きで、個人開発なども行っている。
趣味はバイクアイコン画像は大抵愛車の「Z250」である。友達にアイコン描いてもらえて嬉しい。
PHP / Laravel / CakePHP2 / CakePHP3 / Vue / Nuxt / C# / etc...
Tweet
Tweets by nonz250Past articles
2022/05/15 S3みたいなストレージサーバーっぽいものを自前で用意する⑤【DI / Repogitory実装】2022/04/24 S3みたいなストレージサーバーっぽいものを自前で用意する④【RFC 7807 エラーレスポンス実装】
2022/04/10 S3みたいなストレージサーバーっぽいものを自前で用意する③【Digest認証実装】
2022/03/26 S3みたいなストレージサーバーっぽいものを自前で用意する②【ミドルウェア実装】
2022/03/13 S3みたいなストレージサーバーっぽいものを自前で用意する①【ルーティング初期設定】
2022/02/11 Next.jsのGetServerSidePropsの挙動について
2022/01/29 RustでMVC・クリーンアーキテクチャっぽく書いてみた
2022/01/07 2022年の抱負