muwoo / doubanmovie-ssr

Vue豆瓣电影服务端渲染

豆瓣电影服务端渲染

技术基础 Vue 2.0 + vue-router + vuex + element-ui + nodejs 服务端渲染 线上演示环境 贴一下浏览器渲染的地址吧 和浏览器端渲染对比 浏览器端doubanMovie

相关说明

可以看到，刚进来的时候是有个loading的，所以这个服务端渲染并没有完全渲染整个页面 而是选择性渲染了相关的部分。clone下源码可以发现，我所有的异步数据并没有 prePatch, 所以数据没有同步到服务端，也就是说，刚开始渲染的时候，只是返回了一些基本的dom信息 这个对于数据SEO不重要还是不错的体验方式，因为我抛弃了数据异步加载的时间。 这种方式一般适合title和mate标签的SEO

Features

• 服务器端  - Vue + vue-router + vuex working together
  • Server-side data pre-fetching
  • Client-side state & DOM hydration
  • Automatically inlines CSS used by rendered components only
• vue 单文件组件  - Hot-reload in development
  • CSS extraction for production
• Real-time List Updates with FLIP Animation

简单概要

构建步骤

Requires Node.js 6+

# install dependencies
npm install # or yarn

# serve in dev mode, with hot reload at localhost:8080
npm run dev

# build for production
npm run build

# serve in production mode
npm start

doubanmovie-ssr's Issues

idea导入时会卡死

电脑配置💻：19款MPB顶配，只有导入这个工程时会卡死，其他工程就不会。那个doubanMovie项目也不会卡死

issue Communication

服务端渲染相关技术讨论，可以在这里探讨

运行不起来啊

Uncaught (in promise) RangeError: Maximum call stack size exceeded

首页服务端渲染直出错误（懒得pl）

当前首页默认只在服务端渲染header部分，对于列表信息仍然走的其阿奴单异步渲染；如果列表信息也在服务端渲染的化，目前有问题
action.js部分

getMoving ({commit, state}) {
    return utils.get('/movie/in_theaters', {city: state.city}).then(res => {
      commit('MOVING_LIST', {list: res})
      commit('MOVING_LOADING', {loading: false})
    }).catch(e=>{
      console.log(e)
    })
  }

否则异步组件渲染不出来，状态仍为初始状态

这个浏览器端的app.js 和 vendor.js还是比较大

这个浏览器端的app.js 和 vendor.js还是比较大， 加载时间好像比浏览器端渲染还要慢点

项目中有报错，但是不影戏正常运行 能解决下么

(node:7028) UnhandledPromiseRejectionWarning: TypeError: Cannot read property 'body' of undefined
at handler (C:\Users\hello\Desktop\doubanMovie-SSR-master\node_modules\vue-resource\dist\vue-resource.common.js:1109:53)
at C:\Users\hello\Desktop\doubanMovie-SSR-master\node_modules\vue-resource\dist\vue-resource.common.js:1120:41
at
at process._tickCallback (internal/process/next_tick.js:189:7)
(node:7028) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). (rejection id: 1)
(node:7028) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

运行报接口错误

cnpm i
npm run dev
打开localhost8080报接口异常，请问需要配置什么吗？

能不能出个使用步骤呢，看代码文档新手很难理解的

改成完全服务器渲染

请问怎么可以改成完全服务器端?

浏览器兼容有做过测试吗，pc和移动端

疑问建议

整个项目中还是没有看到从后端取数据渲染的过程，后端渲染部分的数据都是写死在页面上的，所以这部分的参考意义就比较弱了。我尝试修改了preFetch，发现可以调用到action中，api的回调中没有日志输出。是因为vue-resource不支持后端联网么？所以整个项目给人的感觉还是比较迷惑。

你是基于hackernews的模板改的吧

如题