Zephyr - Study: Nextjs (1)

1. Nextjs:

    Nextjs is the React("fullstack") Framework for production

    React 注重在搭建用户的交互界面，而 Nextjs 是搭建在 React 之上的框架

    React: "library" / Nextjs: "framework"

    

2. Features:

    * server-side rendering

                服务端渲染， SSR (Server-side Rendering) ，顾名思义，就是在浏览器发起页面请求后由服务端完成页面的 HTML 结构拼接，返回给浏览器解析后能直接构建出有内容的页面。

                客户端渲染 ，CSR（Client Side Rendering），通俗的讲就是由客户端完成页面的渲染。其大致渲染流程是这样：在浏览器请求页面时，服务端先返回一个无具体内容的 HTML，浏览器还需要再加载并执行 JS，动态地将内容和数据渲染到页面中，才能完成页面具体内容的显示。

简而言之，SSR强在首屏渲染。而CSR强在用户和页面多交互的场景

    * file-based routing

            router: 仅根据监视url的变化，来呈现不同的网页，而没有向服务端发出新的请求

            直接用文件目录来呈现router

    * fullstack

            可以直接访问数据库

3. install

    npx create-next-apps

4. file-based routing

        * index.js: 这个是特殊的，不会把index作为路由名    

        * dynamic path:

               * import { useRouter } from 'next/router'

                useRouter这个库用来拿动态路由的内容

                const router = useRouter()

                router.query : 就是url的编码

                

                * import { Link } from 'next/link'

                link 用于跳转到另一个路由

                <Link href="/clients/jack">Jack</Link>

         点击就会跳转到 localhost:3000/clients/jack 而且用Link的好处是不会再发一次http请求

        * 404 page:

                创建404.js

5. Project1: