Next.js & SSR & CSR & SG All In One
<h1 id="nextjs--ssr--csr--sg-all-in-one">Next.js & SSR & CSR & SG All In One</h1><blockquote>
<p>getStaticPaths, getStaticProps, getServerSideProps</p>
</blockquote>
<p>getStaticProps (Static Generation): Fetch data at build time.</p>
<p>getStaticPaths (Static Generation): Specify dynamic routes to pre-render based on data.</p>
<p>getServerSideProps (Server-side Rendering): Fetch data on each request.</p>
<p>https://nextjs.org/docs/basic-features/data-fetching</p>
<p><img src="https://img2020.cnblogs.com/blog/740516/202010/740516-20201015101535611-1158203933.png" alt="" loading="lazy"></p>
<h2 id="react-ssr">React SSR</h2>
<p>https://reactjs.org/docs/react-dom-server.html</p>
<ol>
<li>support both server and browser environments</li>
</ol>
<pre><code class="language-js">renderToString()
renderToStaticMarkup()
</code></pre>
<ol start="2">
<li>depend on a package (stream) & only support the server environment</li>
</ol>
<pre><code class="language-js">renderToNodeStream()
renderToStaticNodeStream()
</code></pre>
<p><img src="https://img2020.cnblogs.com/blog/740516/202010/740516-20201015101022061-326650941.png" alt="" loading="lazy"></p>
<pre><code class="language-js">// ES modules
import ReactDOMServer from 'react-dom/server';
// CommonJS
var ReactDOMServer = require('react-dom/server');
</code></pre>
<blockquote>
<p>如何支持 UMD 模块导入？看源码</p>
</blockquote>
<p>https://www.cnblogs.com/xgqfrms/p/13728515.html</p>
<h2 id="nextjs">Next.js</h2>
<p>https://nextjs.org/</p>
<h2 id="routing-system">routing system</h2>
<p>An intuitive page-based routing system (with support for dynamic routes)</p>
<p>https://nextjs.org/docs/basic-features/pages</p>
<p>https://nextjs.org/docs/routing/dynamic-routes</p>
<h2 id="ssr">SSR</h2>
<p>Server Side Render</p>
<h2 id="csr">CSR</h2>
<p>Client Side Render</p>
<h2 id="sg">SG</h2>
<p>Static Generation</p>
<p>Site Generator</p>
<blockquote>
<p>gatsby</p>
</blockquote>
<p>https://www.gatsbyjs.org/</p>
<h2 id="ssg">SSG</h2>
<p>Static Site Generator</p>
<p>https://nextjs.org/docs/basic-features/pages#static-generation-recommended</p>
<h2 id="gr-">GR ???</h2>
<h2 id="pr">PR</h2>
<p>pre-rendering</p>
<p>https://nextjs.org/docs/basic-features/pages#pre-rendering</p>
<h2 id="demo">demo</h2>
<pre><code class="language-js">
const log = console.log;
log(`Article page`)
// This function gets called at build time
// export async function getStaticPaths() {
// // Call an external API endpoint to get posts
// // const res = await fetch('https://.../posts')
// // const posts = await res.json()
// const routes = [
// {
// id: 1,
// },
// {
// id: 2,
// },
// {
// id: 3,
// },
// ];
// const posts = await Promise.resolve(routes);
// // Get the paths we want to pre-render based on posts
// const paths = posts.map((post) => `/articles/${post.id}`);
// log(`paths =`, paths)
// // We'll pre-render only these paths at build time.
// // { fallback: false } means other routes should 404.
// return {
// paths,
// fallback: false,
// };
// }
// This also gets called at build time
// export async function getStaticProps({ params }) {
// log(`params = `, params)
// //{ id: '2' }
// // params contains the post `id`.
// // If the route is like /posts/1, then params.id is 1
// // const res = await fetch(`https://.../posts/${params.id}`)
// // const articles = await res.json()
// const blogs = [
// {
// title: "article 1",
// },
// {
// title: "article 2",
// },
// {
// title: "article 3",
// },
// ];
// const articles = await Promise.resolve(blogs);
// const {
// id,
// } = params;
// // Pass post data to the page via props
// log(`getStaticProps`, params)
// return {
// props: {
// id,
// article: articles[`${id - 1}`],
// },
// };
// }
</code></pre>
<pre><code class="language-js">
const log = console.log;
log(`Article page`)
// This gets called on every request
export async function getServerSideProps({ params }) {
log(`ServerSide params = `, params)
// Fetch data from external API
// const res = await fetch(`https://.../data`)
// const data = await res.json()
const blogs = [
{
title: "article 1",
},
{
title: "article 2",
},
{
title: "article 3",
},
];
const articles = await Promise.resolve(blogs);
const {
id,
} = params;
log(`getServerSideProps`, params)
return {
props: {
id,
article: articles[`${id - 1}`],
},
};
}
function Article(props) {
log(`props = `, props)
// log(`props.url`, props.url)
// const {
// articles,
// } = props;
const {
// url: {
// query: {
// id,
// },
// },
id,
article,
} = props;
return (
<div className="posts-box">
<div className="posts-title">articles Page</div>
<div>article id = {id}</div>
<div>{JSON.stringify(article)}</div>
<style jsx>{`
.posts-box {
min-height: 100vh;
padding: 0 0.5rem;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
`}</style>
<style jsx global>{`
.posts-title {
font-size: 23px;
color: #f0f;
}
`}</style>
</div>
);
}
export default Article;
</code></pre>
<h2 id="refs">refs</h2>
<p>https://www.cnblogs.com/xgqfrms/p/10720612.html</p>
<hr>
<div>
</div>
<hr>
<blockquote style="display: flex; flex-flow: column; align-items: center; justify-content: center; text-align: center; border: none">
<h3><strong><span style="font-size: 16pt; color: rgba(0, 255, 0, 1)">©xgqfrms 2012-<span data-uid="copyright-aside">2020</span></span></strong>
<p><span style="font-size: 18pt; color: rgba(0, 255, 0, 1)"><strong>www.cnblogs.com 发布文章使用：只允许注册用户才可以访问！</strong></span></p>
</h3></blockquote>
<hr>
</div>
<div id="MySignature" role="contentinfo">
<div style="display: flex; flex-flow: column nowrap; align-items: center; justify-content: center;">
<p>本文首发于博客园，作者：xgqfrms，原文链接：https://www.cnblogs.com/xgqfrms/p/13193303.html</p>
<p style="color: red; font-size: 23px; margin-top: 5px; margin-botom: 5px;">未经授权禁止转载，违者必究！</P>
</div>
<hr/><br><br>
来源：https://www.cnblogs.com/xgqfrms/p/13193303.html
頁:
[1]