Next.js实现react服务器端渲染的方法示例

程序员文章站 2022-04-28 11:10:06

说明实现路由跳转、redux 文件版本 “next”: “^4.2.3”, “react”: “^16.2.0”, “react-dom”...

说明

实现路由跳转、redux

文件版本

“next”: “^4.2.3”,
“react”: “^16.2.0”,
“react-dom”: “^16.2.0”

next.js github 文档

使用

next.js 使用文件体统作为api，可以自动进行服务器端渲染和代码分割

1. 安装

yarn add next react react-dom

2. package.json 中添加 npm script

 "scripts": {
  "dev": "next",
  "build": "next build",
  "start": "next start"
 },

3. 创建 /pages 文件夹，其中文件会映射为路由

/pages 文件夹是*组件文件夹其中 /pages/index.js 文件会映射文 / 路由，其他文件根据文件名映射

目录结构	映射路由
/pages/index.js	/
/pages/about.js	/about
/pages/home/index.js	/home
/pages/home/about.js	/home/about

每一个路由js文件都会 export 一个 react 组件，这个组件可以是函数式的也可以是通过集成 react.component 得到的类

export default () => <div>this is index page </div>;

4. 创建 /static 文件夹，存放静态资源

静态资源文件夹文件会映射到 /static/ 路由下，直接通过 http://localhost:3000/static/test.png 访问

5. 使用内置组件 <head> 定制每个页面的 head 部分

  import head from 'next/head'; // 引入内置组件

  export default () => (
    <div>
     <head>
       <title>index page</title>
       <meta name="viewport" content="initial-scale=1.0, width=device-width"/>
     </head>
     <div>this is index page</div>
    </div>
  );

6. 使用内置组件 <link> 进行路由跳转

  import link from 'next/link';

  export default () => (
    <div>
     <p>this is home index page</p>
     <link href="/about" rel="external nofollow" rel="external nofollow" >
       <a> to about page</a>
     </link>
    </div>
  );

更多 link 使用方式

import react, {component} from 'react';
import link from 'next/link';

export default class about extends component {
  constructor(props) {
   super(props);
  }
  render() {
   // href 值可以是一个对象
   const href = {
     pathname: '/home',
     query: {name: 'test'}
   };

   return (
    <div>
      <p>this is about page </p>
      <img src="/static/test.png" alt="test"/>
      {/* replace 覆盖历史跳转 */}
      <link href={href} replace>
      <a>click to home index page</a>
      </link>
    </div> 
   );
  }
}

7. 使用内置 router 方法，手动触发路由跳转

next/router 提供一套方法和属性，帮助确认当前页面路由参数，和手动触发路由跳转

  import router from 'next/router';
  /*
    router.pathname ==> /home
    router.query ==> {}
    router.route - 当前路由
    aspath - 显示在浏览器地址栏的实际的路由
    push(url, as=url) - 跳转页面的方法
    replace(url, as=url) - 跳转页面
  */

更好的方式使用路由 – router 的 withrouter 方法

import link from 'next/link';
import {withrouter} from 'next/router';

const home = (props) => {
  // 这里的 props 会得到 {router, url} 两个属性
  // router: {push: ƒ, replace: ƒ, reload: ƒ, back: ƒ, prefetch: ƒ, …}
  // url: {query: {…}, pathname: "/home", aspath: "/home?name=test", back: ƒ, push: ƒ, …}
  console.log(props);
  return (
   <div>
     <p>this is home index page </p>
     {/* <link href="/about" rel="external nofollow" rel="external nofollow" >
      <a> to about page</a>
     </link> */}
   </div>
  );
}

export default withrouter(home);

8. 使用 next-redux-wrapper 插件辅助实现 redux

1. 安装依赖

sudo yarn add next-redux-wrapper redux react-redux redux-devtools-extension redux-thunk

2. 创建 initializestore.js 一个可以返回 store 实例的函数

在这个文件中会完成装载中间件、绑定reducer、链接浏览器的redux调试工具等操作

  import { createstore, applymiddleware } from 'redux';
  import { composewithdevtools } from 'redux-devtools-extension'; 
  import thunk from 'redux-thunk';
  import reducer from '../modules/reducers';

  const middleware = [thunk];
  const initializestore = initialstate => {
    return createstore(
       reducer, 
       initialstate, 
       composewithdevtools(applymiddleware(...middleware))
     );
  };

  export default initializestore;

3. 创建 reducer , action

与普通 react-redux 项目创建 reducer, action 的方法一致，我把这部分代码都提取到一个名为 modules的文件夹中

  // /modules/reducers.js
  import { combinereducers } from 'redux';
  import about from './about/reducer';

  // 合并到主reducer
  const reducers = {
    about
  };

  // combinereducers() 函数用于将分离的 reducer 合并为一个 reducer 
  export default combinereducers(reducers);

  // /modules/about/reudcer.js 
  // /about 页面的 reducer
  import {
    change_count
  } from '../types-constant';

  const initialstate = {
    count: 0
  };

  const typescommands = {
    [change_count](state, action) {
     return object.assign({}, state, { count: action.msg });
    },
  }

  export default function home(state = initialstate, action) {
    const actionresponse = typescommands[action.type];

    return actionresponse ? actionresponse(state, action) : state;
  }

  // /modules/about/actions.js
  // /about 页面的 action
  import {
    change_count
  } from '../types-constant';

  export function changecount(newcount) {
    return {
     type: change_count,
     msg: newcount
    };
  }

4. 页面中使用

需要用到 next-redux-wrapper 提供的 withredux 高阶函数，以及 react-redux 提供的 connect 高阶函数

  import react, { component } from 'react';
  import withredux from 'next-redux-wrapper';
  import { connect } from 'react-redux';
  import { bindactioncreators } from 'redux';
  import aboutcom from '../components/about/index';
  import initializestore from '../store/initializestore';
  import { changecount } from '../modules/about/actions';

  class about extends component {
    constructor(props) {
     super(props);
    }
    render() {
     const { about: { count }, changecount } = this.props;
     return <aboutcom count={count} changecount={changecount} />;
    }
  }

  const connectedpage = connect(
    state => ({ about: state.about }),
    dispatch => ({
     changecount: bindactioncreators(changecount, dispatch)
    })
  )(about);

  export default withredux(initializestore)(connectedpage);

查看 github官网

react-next github上一个next架构为主实现react服务端渲染的模板

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

上一篇： Spring系列之——springboot解析resources.application.properties文件

下一篇： Django路由分配以及模版渲染

Next.js实现react服务器端渲染的方法示例

react-router实现跳转传值的方法示例

【译】在React中实现条件渲染的7种方法