React 18に備えるにはどうすればいいの？ 5分で理解する - Qiita
React 18はReactの次期メジャーバージョンで、2021年の6月にalpha版が、11月にbeta版が出ました。また、Next.js 12でもReact 18のサポートが実験的機能として追加されました。React 18の足音がだんだんと我々に近づき、アーリーアダプターではない皆さんの視界にもいよいよReact 18が入ってきたところです。 特に、React 18ではServer-Side Rendering (SSR) のストリーミングサポートが追加されます。現在ReactでSSRを行いたい人の強い味方としてNext.jsが存在しているわけですが、Next.js 12でもReact 18を通してストリーミングの恩恵を受けることができます（Next.jsではSSR Streamingと呼んでいるようです）。また、厳密にはReact 18とは別ですが、React Server Comp
サーバサイドレンダリングの導入から生じるSSRF | セキュリティブログ | 脆弱性診断（セキュリティ診断）のGMOサイバーセキュリティ byイエラエ
オフェンシブセキュリティ部の山崎です。サーバサイドレンダリング（SSR）の導入によってSSRFが発生する問題を見つける機会があったため、本記事では実例を交えながら紹介したいと思います。 サーバサイドレンダリング（SSR）とは？ 本記事で扱うSSRとは「サーバ上でHTMLを出力すること」を指しています。ただしerbやjspのようなテンプレートからHTMLを出力するのとは異なり、一般的には以下のようにクライアントサイドレンダリング（CSR）の文脈で使われることが主です。 近年のVue.jsやReactを代表するようなWebフロントエンドフレームワークはブラウザ上で動的にDOMツリーを構築して画面を描画（CSR）するのが主流となっています。これによってページ遷移を挟まずユーザ体験のよいシングルページアプリケーション（SPA）が作ることができるというメリットがあります。 ただ、単純なSPAにはデメ
[アップデート]AmplifyがNext.jsとNuxt.jsを利用したSSR（Server Side Rendering）に対応しました！ | DevelopersIO
AmplifyがNext.jsとNuxt.jsを利用したSSR（Server Side Rendering）をサポートしました！ Amplify JavaScript adds server-side rendering (SSR) support for frameworks like Next.js and Nuxt.js これまで、AmplifyはSPAで構築するのが基本でしたが、SSRな構成をとることもできるようになり、選択の幅が広がったと思います！ このSSR環境をさっそく構築してみました！ 構成図 AmplifyでNext.jsを利用してSSR環境を構築するとこんな感じの構成になります。 Serveless Frameworkを利用して、Lambda@EdgeでレンダリングするSSR可能なCloudFrontを構築することで、SSRを実現しています。 構築してみた Amplif
![[アップデート]AmplifyがNext.jsとNuxt.jsを利用したSSR（Server Side Rendering）に対応しました！ | DevelopersIO](https://cdn-ak-scissors.b.st-hatena.com/image/square/194a9cfb6a3c1c20634fa9a82024d910930e4552/height=288;version=1;width=512/https%3A%2F%2Fdevio2023-media.developers.io%2Fwp-content%2Fuploads%2F2019%2F05%2Faws-amplify.png)
Next.jsでNot FoundページやISEページをカスタマイズする - $shibayu36->blog;
https://nextjs.org/docs/advanced-features/custom-error-page を見て設定したが、特にstatusCode周りでハマったのでメモ。 pages/_error.tsxを作ると、SSR(Server Side Rendering)時やCSR(Client Side Rendering)時に例外が起きるなどした時やルーティングが存在しないエラーが発生した時に、そのページを表示してくれる このページで400エラー、404エラー、500エラーをハンドリングして、自前のページを作成すれば良い pages/_error.tsxはproduction環境時(next build -> next startした時)にしか使われないので注意。デバッグするときはnext buildをする必要がある statusCode算出周りはハマりどころなので、自前でや
Next.js + ApolloでSSRするときにパフォーマンスが低下する問題について
Next.js + Apollo Next.js の公式リポジトリには Apollo を使用する際のサンプルコードがあるが、 これらを参考に SSR するとかなりパフォーマンスが悪い。 with-apollo with-typescript-graphql 例えば、with-typescript-graphql の/pages/index.tsx を見てみる。 ... import { useViewerQuery, useUpdateNameMutation, ViewerDocument, } from '../lib/viewer.graphql' import { initializeApollo } from '../lib/apollo' const Index = () => { const { viewer } = useViewerQuery().data! ... re
next.js + react-apollo-hooks で SSR する - Qiita
公式の examples にないものを実装したのでメモ。 render-props ベースの https://github.com/zeit/next.js/tree/canary/examples/with-apollo では react-apollo-hooks と作りが違うので https://github.com/trojanowski/react-apollo-hooks の SSR の例を見ながら実装した。 lib/initApolloClient.js は一緒 import { ApolloClient, InMemoryCache, HttpLink, NormalizedCacheObject } from "apollo-boost"; import fetch from "isomorphic-unfetch"; let apolloClient: ApolloCli
Next.js 9.3新API getStaticProps と getStaticPaths と getServerSideProps の概要解説 - Qiita
Next.js 9.3新API getStaticProps と getStaticPaths と getServerSideProps の概要解説Reactserver-side-renderingNext.jsJAMstackVercel はじめに この記事ではNext.jsにvesrion 9.3から導入された以下の3つのAPIについて解説します。 getStaticProps getStaticPaths getServerSideProps こちらのissueで議論されてきた機能です。 Static Generation / SSG Improvements · Issue #9524 · zeit/next.js GitHub追っているとGS(S)P methodsと略されているのを見ます。 Next.jsが未経験の方でもReactとSSR(Server Side Render
SPA, SSR, SSGの違いについて図解でまとめてみた
Webフロントエンドの領域にいるとよく耳にするのがSPA, SSR, SSGなどのややこしい略語たち。 なんとなく概要は分かってるけど自分の言葉で説明する自信がなかったので備忘録としてまとめておきます。 図解でできるだけ分かりやすくまとめられたと思うので、参考にどうぞ。 SPA（Single Page Application） SPAはSingle Page Applicationの略称。 ブラウザから初回リクエストが来ると、サーバーは、JSのビルドファイルと最小限のHTMLファイルを返却する。実際はもっと色々あるがざっくりとしたHTMLファイルの内容は以下のような感じ。 <html> <head> <title>タイトル</title> </head> <body> <div id="app"></div> <script src="/js/bundle.js"></script> </
SSR、SSG、Client Side Renderingの違いをまとめた - Qiita
<html> <head> <title>sample</title> </head> <body> <div id="app"></div> <script src="/js/bundle.js"></script> </body> </html> 上記のHTMLファイルはルートディレクトリ直下に置くのが普通なため、/以外にリクエストが送られると404となる。開発時はwebpack-dev-serverがよしなに面倒を見てくれるが、ホスティング先ではそうではないので、初めてSPAでアプリを作ってホスティングしたときに戸惑うやつ。 なので、どのルートにリクエストが送信されても、上記のHTMLファイルがダウンロードされるように設定が必要。 「Vue.jsやReactを使っている = SPA」ではない。LaravelやRailsなどのテンプレートファイルにVueやReactコンポーネントを埋め
Next.jsのサーバーサイドレンダリングで、シングルページアプリケーションの課題を解消 (1/3)：CodeZine（コードジン）
シンプルに構成されたシングルページアプリケーションでは、サーバーはファイルを配信するだけで、画面を組み上げるための処理はブラウザ側で行われます。この方式におけるいくつかのデメリットを埋めるために考案されたのが、ある程度の画面構築をサーバー側で行う、サーバーサイドレンダリングです。今回は、サーバーサイドレンダリングの概要と、実際に使う場合のフレームワークの解説を行います。 対象読者 JavaScriptとWeb開発の基礎に理解がある方 Reactに興味／関心があり、これから学び始める方 前提環境 筆者の検証環境は以下の通りです。 macOS High Sierra 10.13.3 Node.js v10.4.1／npm 6.1.0 React 16.5.1 firebase-tools 4.2.1 create-next-app 0.5.9 Next.js 6.1.2 Babel 7.0.0
Server Side Renderingについて知るべきこと。Server Side Renderingとは何か？ それによって何が改善されるのか？（前編） ng-japan 2017
Server Side Renderingについて知るべきこと。Server Side Renderingとは何か？ それによって何が改善されるのか？（前編） ng-japan 2017 JavaScriptフレームワークとして知られるAngularのイベント「ng-japan 2017」がAngular Japan User Group主催で6月17日に都内で開催されました。 Angularは基本的にWebブラウザで実行されるJavaScriptアプリケーションのフレームワークですが、一方でサーバサイドでAngularが備えるHTML構成機能を実現する、いわゆるServer Side Rendering機能の開発も「Angular Universal」として進んでいます。 そのため、Server Side Renderingに興味を持つAngularデベロッパーも増えてきました。 ng-
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
NextjsのssrにExpress必要なのか