资讯专栏INFORMATION COLUMN

react 服务端(ssr) 框架next.js开发个人网站分享

caiyongji / 895人阅读

摘要:项目介绍利用服务端框架写的博客,喜欢就给个支持一下。运行部署使用说明关于演示不能上传图片,不能发表文章或者修改属于正常情况,因为只是为了展示。

next-blog 项目介绍

利用react服务端框架next.js写的博客,喜欢就给个Star支持一下。
https://github.com/Weibozzz/next-blog
线上地址: http://www.liuweibo.cn
本项目使用next.js经验分享:http://www.liuweibo.cn/p/206

软件架构

软件架构说明
react.js next.js antd mysql node koa2 fetch

网站使用技术

前端:React(16.x) Next.js antd-design fetch Less

后端:node框架koa和mysql (目前前后端分离,这里只负责写接口,和平常的ajax获取接口一样,这里就不开放源码了)

网站目的:业余学习,记录技术文章,学以致用

网站功能

markdown发布文章

修改文章(增删改查)

用户评论

上传图片到七牛云存储

安装教程

1.快速开始
虽然是服务端渲染,但是也要调用接口,所以需要调用后端的接口

进入config文件夹下的env.js的isShow设置为true,这里只是调用了我自己线上的接口,当然你
只能看不能修改接口哦。如果为false则调不到接口,需要自己去写接口。

2.运行

cnpm i
npm run dev

3.部署

cnpm i
npm run build
npm start
使用说明

关于演示不能上传图片,不能发表文章或者修改属于正常情况,因为只是为了展示。

关于路看不到发布文章路由和后台管理也属于正常情况,可以修改代码展示路由效果。

网站截图

1.详情页

2.列表页

3.编辑页面和发布文章,上传图片到七牛云

网站技术介绍
完全借助于 next.js 开发的个人网站,线上地址 http://www.liuweibo.cn 总结一下开发完成后的心得和使用体会。gtihub源码https://github.com/Weibozzz/next-blog。喜欢就给个Star支持一下。
为什么使用服务器端渲染(SSR)?

网站是要推广的,所以需要更好的 SEO,搜索引擎可以抓取完整页面

访问速度,更快的加载静态页面

网站使用技术

前端:React(16.x) Next.js antd-design fetch Less

后端:node框架koa和mysql (目前前后端分离,这里只负责写接口,和平常的ajax获取接口一样,这里就不开放源码了)

网站目的:业余学习,记录技术文章,学以致用

网站功能

发布文章

修改文章(增删改查)

用户评论

源码剖析
这里就只讲重点了
入口文件server.js

这里用的官方提供的express,同时开启gzip压缩

const express = require("express")
const next = require("next")

const compression = require("compression")
const dev = process.env.NODE_ENV !== "production"
const app = next({ dev })
const handle = app.getRequestHandler()
let port= dev?4322:80

app.prepare()
  .then(() => {
    const server = express()

    if (!dev) {
      server.use(compression()) //gzip
    }
    //文章二级页面
    server.get("/p/:id", (req, res) => {
      const actualPage = "/detail"
      const queryParams = { id: req.params.id }
      app.render(req, res, actualPage, queryParams)
    })

    server.get("*", (req, res) => {
      return handle(req, res)
    })

    server.listen(port, (err) => {
      if (err) throw err
      console.log("> Ready on http://localhost " port)
    })
  })
  .catch((ex) => {
    process.exit(1)
  })
page根组件_app.js

用于传递redux数据,store就和普通react用法一样了,还有header和footer可以放在这里,同理还有_err.js用于处理404页面

import App, {Container} from "next/app"
import React from "react"
import {withRouter} from "next/router" // 接入next的router
import withReduxStore from "../lib/with-redux-store" // 接入next的redux
import {Provider} from "react-redux"


class MyApp extends App {
  render() {

    const {Component, pageProps, reduxStore, router: {pathname}} = this.props;
    return (
      
        
         
        

      
    )
  }
}

export default withReduxStore(withRouter(MyApp))
网站的服务端渲染页面Blog页面

link用于跳转页面,利用as把原本的http://*.com?id=1变为漂亮的 /id/1

head可以嵌套meta标签进行seo

配置不需要seo的组件

import dynamic from "next/dynamic";

//不需要seo
const DynasicTopTipsNoSsr = dynamic(import("../../components/TopTips"),{
  ssr:false
})

import React, {Component} from "react"
import {connect} from "react-redux"
import Router from "next/router"
import "whatwg-fetch" // 用于fetch请求数据
import Link from "next/link"; // next的跳转link
import Head from "next/head"  // next的跳转head可用于seo

class Blog extends Component {

  render() {
    return (
      
{BLOG_TXT}»{COMMON_TITLE} {current}
) } } //这里才是重点,getInitialProps方法来请求数据进行渲染,达到服务端渲染的目的 Blog.getInitialProps = async function (context) { const {id = 1} = context.query let queryStringObj = { type: ALL, num: id, pageNum } let queryTotalString = {type: ALL}; const pageBlog = await fetch(getBlogUrl(queryStringObj)) const pageBlogData = await pageBlog.json() return {pageBlogData} } // 这里根据需要传入redux const mapStateToProps = state => { const {res, searchData, searchTotalData} = state return {res, searchData, searchTotalData}; } export default connect(mapStateToProps)(Blog)
静态资源

根目录创建static文件夹,这里是强制要求,否则加载不到静态资源

配置antd和主题并且按需加载 主题配置

antd-custom.less

@primary-color: #722ED0;

@layout-header-height: 40px;
@border-radius-base: 0px;

styles.less

@import "~antd/dist/antd.less";
@import "./antd-custom.less";

最后统一配置在公共head


    
    
    
    
    
    
    
    
    
  
按需加载配置

.babelrc文件

{
  "presets": ["next/babel"],
  "plugins": [
    "transform-decorators-legacy",
    [
      "import",
      {
        "libraryName": "antd",
        "style": "less"
      }
    ]
  ]
}

next.config.js文件配置

const withLess = require("@zeit/next-less")

module.exports =   withLess(
  {
    lessLoaderOptions: {
      javascriptEnabled: true,
      cssModules: true,

    }
  }
)
页面css

感觉和vuescope一样,stylejsx,加了global为全局,否则只在这里生效

render() {

    return (
      
        
          
        

        
      
    )
页面顶部加载进度条
import Router from "next/router"
import NProgress from "nprogress"

Router.onRouteChangeStart = (url) => {
  NProgress.start()
}
Router.onRouteChangeComplete = () => NProgress.done()
Router.onRouteChangeError = () => NProgress.done()
markdown发表文章和代码高亮

使用只需要marked("放入markdown字符串");

import marked from "marked"
import hljs from "highlight.js";

hljs.configure({
  tabReplace: "  ",
  classPrefix: "hljs-",
  languages: ["CSS", "HTML, XML", "JavaScript", "PHP", "Python", "Stylus", "TypeScript", "Markdown"]
})
marked.setOptions({
  highlight: (code) => hljs.highlightAuto(code).value,
  gfm: true,
  tables: true,
  breaks: false,
  pedantic: false,
  sanitize: true,
  smartLists: true,
  smartypants: false
});
学累了,来个图放松下

参与贡献

Fork 本项目

新建 Feat_xxx 分支

提交代码

新建 Pull Request

遗留问题

访问量大的时候要做数据缓存

cdn node查看图片日期

配置图片描述和更改

上传图片高质量暂未支持上传,上传代码改进

上传为刚好1M bug

登陆后支持收藏文章和修改评论

顶部加载滚动条首次没loading

增加koa子模块

评论支持markdown,评论内容过多建议去sf平台

待学习修改

开发环境 warning.js:33 Warning: A component is contentEditable

eslint

关于作者 / About

github:https://github.com/Weibozzz

个人博客:http://www.liuweibo.cn

segmentfault:https://segmentfault.com/u/weibozzz

版权声明

所有原创文章的著作权属于 Weibozzz。

作者:刘伟波

链接:http://www.liuweibo.cn/p/206

来源:刘伟波博客

本文原创版权属于刘伟波 ,转载请注明出处,谢谢合作

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/58021.html

相关文章

  • 细说后模板渲染、客户渲染、node 中间层、服务渲染(ssr

    摘要:细说后端模板渲染客户端渲染中间层服务器端渲染前端与后端渲染方式的发展大致经历了这样几个阶段后端模板渲染客户端渲染中间层服务器端渲染。与后端模板渲染刚好相反,客户端渲染的页面渲染都是在客户端进行,后端不负责任何的渲染,只管数据交互。 细说后端模板渲染、客户端渲染、node 中间层、服务器端渲染(ssr) 前端与后端渲染方式的发展大致经历了这样几个阶段:后端模板渲染、客户端渲染、node ...

    icyfire 评论0 收藏0
  • koa-cola:只需一个react组件,同时支持单页应用(SPA)和服务器渲染(SSR)

    摘要:是一个基于和的服务器端和浏览器端的的前后端全栈应用框架。是的组件,并且会进行数据初始化不但可以支持的数据初始化,还可以合并和的,使用同一个,和的无缝结合。 koa-cola是一个基于koa和react的服务器端SSR(server side render)和浏览器端的SPA(single page application)的web前后端全栈应用框架。 koa-cola使用typescr...

    XGBCCC 评论0 收藏0
  • 每周清单第 11 期:Angular 4.1支持TypeScript 2.3,Vue 2.3优化

    摘要:斯坦福宣布使用作为计算机课程的首选语言近日,某位有年教学经验的斯坦福教授决定放弃,而使用作为计算机入门课程的教学语言。斯坦福官方站点将它们新的课程描述为是最流行的构建交互式的开发语言,本课程会用讲解中的实例。 前端每周清单第 11 期:Angular 4.1支持TypeScript 2.3,Vue 2.3优化服务端渲染,优秀React界面框架合集 为InfoQ中文站特供稿件,首发地址为...

    warkiz 评论0 收藏0
  • 2018年前开发回顾

    摘要:在整个年,看到发布版增加了许多功能,包括新的生命周期方法新的上下文指针事件延迟函数和。它在等待渲染异步响应时数据,是延迟函数背后用来管理组件的代码分割的。发布自第版开始将近年后,于年发布。 前端发展发展迅速,非常的快。 本文将回顾2018年一些重要的前端新闻,事件和 JavaScript 趋势。 想阅读更多优质文章请猛戳GitHub博客,一年百来篇优质文章等着你! showImg(ht...

    crelaber 评论0 收藏0
  • React 服务渲染完美的解决方案

    摘要:服务端渲染两种方式根据上文介绍对服务端渲染利弊有所了解,我们可以根据利弊权衡取舍,最近在做服务端渲染的项目,找到多种服务端渲染解决方案,大致分为两类。第一种方式传统方式服务端渲染,解决用户体验和更好的,有诸多工具使用这种方式如的的等。 最近在开发一个服务端渲染工具,通过一篇小文大致介绍下服务端渲染,和服务端渲染的方式方法。在此文后面有两中服务端渲染方式的构思,根据你对服务端渲染的利弊权...

    DesGemini 评论0 收藏0

发表评论

0条评论

caiyongji

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<