next's Link component

Recently, in order to quickly start the development of the station group system in the project, we investigated many frameworks: ghost, wordpress, hexo, vuepress, next, and found that each of them has advantages in their respective use environments. Although ghost can share a set of front and back ends, use node+handlebars server-side rendering, and change the site by developing different theme packages, the main disadvantage is that there is no way to share multiple sites with one set. As for the generation of other static pages such as hexo, hugo, and vuepress, dynamic data configuration is not supported, and each time a different site is used, it must be packaged and released, which is not very flexible. And next mainly includes ssr, ssg(the most important is pre-rendering, the key point isr- 增量静态重新生成页面), spawhich is more suitable for flexible development in the early stage, and comes with some component optimization Image, Link, Script, which are very suitable for the system with relatively many image resources in our current project, so This article focuses on Linkcomponent learning

1、`Link`

It is a React component that extends HTML elements to provide preloading<a> and client-side navigation between routes . The popular understanding is that using this component can load the resources of the next page in advance

2. Test effect

// 快速安装使用、
npx create-next-app@latest

Test under the new version of app-router and the old version of pages respectively

It will eventually be rendered into a tag, which can be crawled by search engines for seo

The relevant code is as follows

//src/app/page.tsx
import Link from 'next/link'
import styles from './page.module.css'

export default function Home() {
  return (
    <main className={styles.main}>
      <div style={{
        'display': 'flex',
        'flexDirection': 'column',
        'paddingTop': '600px'
      }}>
        <div>
          <Link href="/test">app-router的test页面</Link>
        </div>
        <div>
          <Link href="/dynamic/test">app-router的动态页面</Link>
        </div>
        <div>
          <Link href="/test/a" >pages下的a页面</Link>
        </div>
        <div>
          <Link href="/test/b">pages下的b页面</Link>
        </div></div>
    </main>
  )
}

//src/app/dynamic/[slug]/page.tsx
export default function Page({
    params,
    searchParams,
}: {
    params: { slug: string }
    searchParams: { [key: string]: string | string[] | undefined }
}) {
    return <h1>app-router的动态页面{params.slug}</h1>
}

//src/app/test/page.tsx
"use client"

export default function Test() {
    const handleClick = () => {
        alert(1)
    }

    return (<>
        <div>app-router的test页面  </div>
        <div onClick={handleClick}>点击我</div>
    </>)
}

//src/pages/test/a.tsx
export default function A() {
    return <><div>a-pages页面</div></>
}

//src/pages/test/b.tsx
"use client"
import { GetStaticProps } from 'next'
interface props {
    a: number;
    b: number;
    c: number;
}
export const getStaticProps: GetStaticProps = async () => {
    return {
        props: { a: 1, b: 2, c: 3 },
    }
}
export default function B(props: props) {
    const handleClick = () => {
        alert(1)
    }

    return (<>
        <div>b-pages页面 {props.a}</div>
        <div onClick={handleClick}>点击按钮</div>
    </>)
}

yarn build
yarn start

3. Test results:

Currently this preload needs to be used in a production environment
The current component Linkhas a lazy loading effect similar to images. When its link appears in the visible window, the resources of the corresponding page will be loaded, but the processing methods of the two routes are a little different.
For app-router test effect:
- The data and js code of the two pages will be loaded in advance, and then rendered by the client and run directly on the current page
- After entering two pages, the resources of the corresponding pages will no longer be loaded
- Refresh the page, all resources of the current page will be loaded
- next.js will use the browser's native navigation capabilities pushStateto change the URL without refreshing the entire page by using the API, and load the page components into the page. This provides a fast and seamless page switching experience while maintaining page state and user input persistence

Test the effect for pages routing:
- It is found that the two pages loaded are the documents of the corresponding pages
- Click to jump to the corresponding page, and found that the browser's 304 negotiation cache is used at this time
- Refresh the page, still redirect with 304

4. Application

This technique will also be used in the microgame center later, asynchronously loading the next page resource in advance, and then using client-side rendering or using the browser's negotiation caching method to preload the page resource

5. The main method in the source code

通过监听链接组件的 onTouchStart、onMouseEnter的事件，可以提前预加载资源
prefetch方法：主要是用来浏览器空闲时，预先加载资源
linkClicked方法：主要是通过preventDefault来取消默认事件，然后重新定义用来跳转对应页面方式