统一前后端技术栈,Next.js框架简单介绍

分类:一家之言 来源:原创 作者:管理员 2019-04-26 21:50

概要:如今React开发占据着客户端渲染的主流地位,今天我们介绍的Next.js框架,同样也采用React的开发模式,让平时写客户端居多的朋友们,在写服务端渲染逻辑时一点也不陌生。同时客户端与服务端还可以保持更为灵活的通用性,减少开发成本与维护成本。这个框架很容易上手,已经有多个项目正在稳定地运行在生产环境,若有兴趣,就来尝试一下吧。

服务端渲染


是什么?

由web服务器(IIS,Tomcat...)自己组装好一个页面所需要的html字符串,并直接返回给浏览器的过程


优点

  • 服务端数据处理方便

  • 处理逻辑对客户端不公开

  • SEO友好


缺点

  • 处理数据也需要时间

  • 返回给客户端的数据并不一定都是被需要的

  • 客户端白屏


如何平衡?

  • 找准应用的定位

  • 页面性能及数据的响应要求是否严格


NEXT.JS

框架栈

  • ReactJs(内置)

  • Babel、Webpack(内置)

  • TypeScript

一个对前端开发者十分友好的服务端渲染框架


特色

  • 无需额外的配置

  • 支持router、css(sass/less...)

  • 支持自定义SSR引擎(如:KOA等)

  • 动静分离(static)

  • ...


开始学习


目录结构

./pages/

_app.tsx

_document.tsx

index.tsx

下划线开头的为私有页面,其它文件为真实页面的路径,如:http://localhost/index

./static/

style.css

bg.jpg

静态资源只能存放在这里


安装

npm install --save next react react-dom

运行脚本

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

具体细节


服务端数据初始化

import React from 'react';
class HelloUA extends React.Component {
  static async getInitialProps({ req }) {
    const userAgent = req ? req.headers['user-agent'] : navigator.userAgent;
    return { userAgent };
  }
  render() {
    return <div>Hello World {this.props.userAgent}</div>;
  }
}
export default HelloUA;

主要参数

  • pathname - URL的路径部分

  • query - 解析为对象的URL的查询字符串部分

  • asPath- 浏览器中显示的实际路径(包括查询)

  • req - HTTP请求对象(仅限服务器)

  • res - HTTP响应对象(仅限服务器)

  • err - 如果在渲染过程中遇到任何错误,则为Error对象


自定义head

import Head from 'next/head';
function IndexPage() {
  return (
    <div>
      <Head>
        <title>My page title</title>
        <meta name="viewport" content="initial-scale=1.0, width=device-width" />
      </Head>
      <p>Hello world!</p>
    </div>
  );
}
export default IndexPage;

内嵌CSS

function HelloWorld() {
  return (
    <div>
      Hello world
      <p>scoped!</p>
      <style jsx>{`
        p {
          color: blue;
        }
        div {
          background: red;
        }
      `}</style>
      <style global jsx>{`
        body {
          background: black;
        }
      `}</style>
    </div>
  );
}
export default HelloWorld;

路由

import Link from 'next/link';
function Home() {
  return (
    <div>
      Click{' '}
      <Link href="/about">
        <a>here</a>
      </Link>{' '}
      to read more
    </div>
  );
}
export default Home;

预加载

import Link from 'next/link';
function Header() {
  return (
    <nav>
      <ul>
        <li>
          <Link prefetch href="/">
            <a>Home</a>
          </Link>
        </li>
      </ul>
    </nav>
  );
}
export default Header;

动态导入

import dynamic from 'next/dynamic';
const DynamicComponent = dynamic(() => import('../components/hello'));
function Home() {
  return (
    <div>
      <Header />
      <DynamicComponent />
      <p>HOME PAGE is here!</p>
    </div>
  );
}
export default Home;

导出静态HTML

next build
next export

使用KOA

const Koa = require('koa')
const next = require('next')
const Router = require('koa-router')
const port = parseInt(process.env.PORT, 10) || 3000
const dev = process.env.NODE_ENV !== 'production'
const app = next({ dev })
const handle = app.getRequestHandler()
app.prepare().then(() => {
  const server = new Koa()
  const router = new Router()
  router.get('/a', async ctx => {
    await app.render(ctx.req, ctx.res, '/a', ctx.query)
    ctx.respond = false
  })
  //...
})

简单示例

Hello World

项目结构


渲染后的页面源码


TypeScript结合

添加配置

{
  "presets": [
    "next/babel",
    "@zeit/next-typescript/babel"
  ]
}
const withTypescript = require('@zeit/next-typescript')
const withCSS = require('@zeit/next-css')
module.exports = {
    ...withCSS(withTypescript())
}

项目结构


进程管理-PM2


作用

将应用进行进程守护,在后台持续运行

使用

npm install pm2 -g
pm2 start app.js

功能

pm2 ls

pm2 delete
pm2 stop
pm2 restart

pm2 logs

所有的应用日志都会保存到您的服务器硬盘中~/.pm2/logs/

pm2 start -i max

创建多个共享相同服务器端口的子进程来扩展应用


pm2 monit


pm2 save
pm2 resurrect
pm2 startup
pm2 unstartup

增强版

pm2 plus
  • 实时监控Web界面

  • 问题和例外跟踪

  • 部署报告

  • 实时日志

  • 电子邮件通知

  • 自定义指标监控

  • 自定义操作中心






THE END

服务端渲染  

编辑:myweb   最后更新于:2019-04-26 22:28

点评:非常简单的一个服务端渲染框架,亮点是基于React,也可以使用Redux来进行状态管理,一起体验吧。



声明:本站部分文章系本站编辑转载,转载目的在于加快信息的传递,及时与广大网友分享更多信息,并不代表本站赞同其观点和对其真实性负责。 如涉及作品内容、版权和其它问题,请及时与本站联系,我们将在第一时间删除内容!本站文章版权归原作者所有,内容为作者个人观点,本站只提供参考并不构成任何投资及应用的建议。


联系我:x889@foxmail.com,鄂ICP备14016278号-2
©2016-2019 我的ABC All Rights Reserved.
友情链接: 一起编程网