HackerNews clone built with Vue 2.0, vue-router & vuex, with server-side rendering
JavaScript
10,842
245 commits
updated Dec 8, 2022
HackerNews clone built with Vue 2.0 + vue-router + vuex, with server-side rendering.
Note: in practice, it is unnecessary to code-split for an app of this size (where each async chunk is only a few kilobytes), nor is it optimal to extract an extra CSS file (which is only 1kb) -- they are used simply because this is a demo app showcasing all the supported features.
This is a demo primarily aimed at explaining how to build a server-side rendered Vue app, as a companion to our SSR documentation. There are a few things we probably won't do in production if we were optimizing for performance, for example:
This demo uses the Firebase-based HN API to showcase real-time updates, but the Firebase API also comes with a larger bundle, more JavaScript to parse on the client, and doesn't offer an efficient way to batch-fetch pages of items, so it impacts performance quite a bit on a cold start or cache miss.
In practice, it is unnecessary to code-split for an app of this size (where each async chunk is only a few kilobytes so the extra request isn't really worth it), nor is it optimal to extract an extra CSS file (which is only 1kb).
It is therefore not recommended to use this app as a reference for Vue SSR performance - instead, do your own benchmarking, and make sure to measure and optimize based on your actual app constraints.
A detailed Vue SSR guide can be found here.
Requires Node.js 7+
# 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
MIT
(top 24 of 35)
571 followers · starred Dec 2017
25,142 followers · starred May 2017
2,444 followers · starred Oct 2017
81 followers · starred Feb 2020
HackerNews clone built with Vue 2.0, vue-router & vuex, with server-side rendering
JavaScript
10,842
245 commits
updated Dec 8, 2022
HackerNews clone built with Vue 2.0 + vue-router + vuex, with server-side rendering.
Note: in practice, it is unnecessary to code-split for an app of this size (where each async chunk is only a few kilobytes), nor is it optimal to extract an extra CSS file (which is only 1kb) -- they are used simply because this is a demo app showcasing all the supported features.
This is a demo primarily aimed at explaining how to build a server-side rendered Vue app, as a companion to our SSR documentation. There are a few things we probably won't do in production if we were optimizing for performance, for example:
This demo uses the Firebase-based HN API to showcase real-time updates, but the Firebase API also comes with a larger bundle, more JavaScript to parse on the client, and doesn't offer an efficient way to batch-fetch pages of items, so it impacts performance quite a bit on a cold start or cache miss.
In practice, it is unnecessary to code-split for an app of this size (where each async chunk is only a few kilobytes so the extra request isn't really worth it), nor is it optimal to extract an extra CSS file (which is only 1kb).
It is therefore not recommended to use this app as a reference for Vue SSR performance - instead, do your own benchmarking, and make sure to measure and optimize based on your actual app constraints.
A detailed Vue SSR guide can be found here.
Requires Node.js 7+
# 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
MIT
(top 24 of 35)
571 followers · starred Dec 2017
25,142 followers · starred May 2017
2,444 followers · starred Oct 2017
81 followers · starred Feb 2020