Next.js & SSR & CSR & SG
Next.js & SSR & CSR & SG
getStaticPaths, getStaticProps, getServerSideProps
getStaticProps (Static Generation): Fetch data at build time.
getStaticPaths (Static Generation): Specify dynamic routes to pre-render based on data.
getServerSideProps (Server-side Rendering): Fetch data on each request.
https://nextjs.org/docs/basic-features/data-fetching
React SSR
https://reactjs.org/docs/react-dom-server.html
- support both server and browser environments
renderToString()
renderToStaticMarkup()
- depend on a package (stream) & only support the server environment
renderToNodeStream()
renderToStaticNodeStream()
// ES modules
import ReactDOMServer from 'react-dom/server';
// CommonJS
var ReactDOMServer = require('react-dom/server');
如何支持 UMD 模块导入?看源码
https://www.cnblogs.com/xgqfrms/p/13728515.html
Next.js
routing system
An intuitive page-based routing system (with support for dynamic routes)
https://nextjs.org/docs/basic-features/pages
https://nextjs.org/docs/routing/dynamic-routes
SSR
Server Side Render
CSR
Client Side Render
SG
Static Generation
Site Generator
gatsby
SSG
Static Site Generator
https://nextjs.org/docs/basic-features/pages#static-generation-recommended
GR ???
PR
pre-rendering
https://nextjs.org/docs/basic-features/pages#pre-rendering
demo
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}`],
// },
// };
// }
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;
refs
https://www.cnblogs.com/xgqfrms/p/10720612.html
xgqfrms 2012-2020
www.cnblogs.com 发布文章使用:只允许注册用户才可以访问!
Next.js & SSR & CSR & SG的更多相关文章
- Node.js & SSR
Node.js & SSR nest.js https://github.com/nestjs/nest next.js 中文文档 https://nextjs.org/learn/ Grap ...
- Next.js SSR Tutorials
Next.js SSR Tutorials https://codesandbox.io/s/nextjs-demo-h49zt cli $ npx create-next-app ssr-demo- ...
- Nuxt.js SSR Optimizing Tips
Nuxt.js SSR Optimizing Tips 性能优化 FP 首次绘制时间 FCP 首次渲染时间 FMP 首屏渲染时间 FI refs https://vueschool.io/articl ...
- SSR & Next.js & Nuxt.js
SSR & Next.js & Nuxt.js Server Side Rendering https://nextjs.org/ https://nuxtjs.org/ SSR &a ...
- 今天聊一聊nuxt.js(上)
背景 近期在做内部系统的重构,从一线业务彻底的重构,经过充分的考虑我们准备把这个项目打造成前台业务的试验站,比如ssr和一些其他的前沿技术的探索,积累充分的经验后待合适的契机应用到C端的项目中. 既然 ...
- nuxt.js实战之开发环境配置
一.创建项目 1.使用如下命令生成项目 vue init nuxt-community/starter-template testPro --testPro为项目名称 2.进入到项目根目录下,使用np ...
- nuxt.js 注册全局组件
plugins 属性配置 src: String (文件的路径) ssr: Boolean (默认为 true) 如果值为 false,该文件只会在客户端被打包引入. 根目录找到 nuxt.confi ...
- Nuxt.js打造旅游网站第3篇_登录页面的编写
主要知识点: 1.使用vuex/store管理数据 2.登录注册逻辑 3.Nuxt的本地存储 1.登录页面 1.1登录页面布局 替换pages/user/login.vue的代码如下 <temp ...
- Nuxt+Vue聊天室|nuxt仿微信App界面|nuxt.js聊天实例
一.项目简述 nuxt-chatroom 基于Nuxt.js+Vue.js+Vuex+Vant+VPopup等技术构建开发的仿微信|探探App界面社交聊天室项目.实现了卡片式翻牌滑动.消息发送/emo ...
随机推荐
- vue开发中的"骚操作"
前言 在与同事协作开发的过程中,见识到了不少"骚操作".因为之前都没用过,所以我愿称之为"高级技巧"! Vue.extend 在交互过程中,有个需求就是点击图标 ...
- K8s 一、(1、容器基本概念 2、k8s基本概念 )
1.容器基本概念 容器其实就是一种特殊的进程,容器是一个 '单进程'模型. Namespace :隔离 Namespace 技术实际上修改了应用进程看待整个计算机"视图",即它的& ...
- linux切割日志
1.vim log.sh,将文件复制进去#!/bin/sh LOG_PATH=/home/tomcat/apache-tomcat-7.0.56/logs/ LOG_NAME=catalina.out ...
- ehCache 配置
package com.jy.modules.cms; import java.io.Serializable; import net.sf.ehcache.Cache; import net.sf. ...
- Linux 配置永久辅助IP
1.什么是辅助IP 辅助IP来源于Linux之中,Linux的系统网卡可以支持多IP的绑定,而辅助IP多用于解耦解决服务之间的兼容性问题,常见的应用场景有: 虚拟IP,高可用飘逸: 永久临时IP解耦使 ...
- 考研机试练习(KY2-KY10)
KY2 成绩排序 时间限制:C/C++ 1秒,其他语言2秒 空间限制:C/C++ 32M,其他语言64M 本题知识点: 排序 sort struct 题目描述 查找和排序 题目:输入任意(用户,成绩) ...
- docker 运用
本文采用centos7,记录docker的简单运用方式 https://www.runoob.com/docker/docker-container-usage.html 1.安装odcker 2.启 ...
- python内置常量是什么?
摘要:学习Python的过程中,我们会从变量常量开始学习,那么python内置的常量你知道吗? 一个新产品,想熟悉它,最好的办法就是查看说明书! 没错,Python也给我们准备了这样的说明书--Pyt ...
- UVA-12304 2D Geometry 110 in 1! (有关圆的基本操作)
UVA-12304 2D Geometry 110 in 1! 该问题包含以下几个子问题 CircumscribedCircle x1 y1 x2 y2 x3 y3 : 三角形外接圆 Inscribe ...
- Java并发包源码学习系列:线程池ThreadPoolExecutor源码解析
目录 ThreadPoolExecutor概述 线程池解决的优点 线程池处理流程 创建线程池 重要常量及字段 线程池的五种状态及转换 ThreadPoolExecutor构造参数及参数意义 Work类 ...