server side renderered front end prototyping
- What is frontcore?
- Why server side rendering?
- Why not static site generators?
- Balancing Requirements
- How it works
- External Resource
frontcore is a front end development/prototyping tool with the goal of reducing the cost of integration with back end systems during deployment and modernizing our development stack. It seeks to accomplish this by integrating the server side rendering workflow into the front end development process. As a result, the artifacts generated by the front end build can be directly integrated with server rendering capabilities of back end systems.
Modern Javascript frameworks (Angular, React, Vue) make developing complex user interfaces easier than ever before. This improved developer experience is accomplished by moving the entire page rendering process into Javascript. However, pure Javascript applications do not lend themselves well to SEO and therefore are not acceptable solutions for most traditional websites which want their content indexed by search engines.
Enter server side rendering. As the name implies, a server side rendered app uses the server to generate page markup and then sends the pre-rendered HTML to the browser. This pre-rendering step makes content available to web crawlers and therefore search engine indexable.
Static site generators (like Gatsby for React) perform this pre-rendering step during the build process. For small sites, static site generation is a simpler solution than SSR and is an acceptable solution. However, for larger sites (with 100s or even 1000s) or pages, pre-building all of those pages takes too long and can even crash the build process. In these cases, it is better to let the server pre-render and deliver only the pages that are needed, as they are needed.
As stated above, the goal is to reduce the effort required to integrate front end code with back end systems. The difficulties arise, in part, from the different requirements for front end and back end systems.
From a front end perspective, the most important features of a prototyping tool are; automatic rebuilding of code on changes, individual component-level previews for rapid prototyping, and page-level previews to simulate productive scenarios.
While these features are not entirely useless for back end integration, they do not help with integration. The most helpful characteristic, from and integration perspective, is parity between the systems. By this, I mean that the environment in which the prototyping tool is as similar as possible to the environment of the productive system.
If parity between the systems can be achieved, the varied requirements of each system become trivial. A core principle of frontcore which moves us towards parity as stated above.
[frontcore] seeks to accomplish this by integrating the server side rendering workflow into the front end development process. As a result, the artifacts generated by the front end build can be directly integrated with server rendering capabilities of back end systems.
Or, by rendering the interface on a simplified development server during front end prototyping, we are more closely simulating the render process on the productive system.
Disclaimer: The current implementation is only configured to work in "development" mode. Additional build tasks and configuration are needed to prepare production ready bundles.
Server Side Rendering is an intimidating topic with which to begin. While the implementation of a server rendering system can be complex, the concepts behind it are actually quite simple. Basically, it consists of three parts:
- A Server
- A Rendering Engine
- An Application
As implied by the name, a server is needed to in order to perform server side rendering.
For this project, the server can be found in ./src/server/app.js. After a quick
look at the source code, you will see, there is nothing spectacular about this server.
It simply, catches every request app.get("*", ...) and responds with the server
rendered app.
This is where the magic happens. The Rendering Engine, takes a Vue app and pre-renders it to static HTML, which is then sent by the server to the web browser. Vue provides an NPM package vue-server-renderer which handles the particulars of pre-rendering a Vue app to HTML. frontcore uses the createBundleRenderer method from this package to generate the HTML.
In the current implementation, the call to createBundleRenderer happens in
./src/server/libs/setup-development-build.js. However, this implementation is
made more complex by the automatic rebuild requirement of a frontend prototyping
tool. See comments in the source of setup-development-build for an explanation
of how the rebuild works. For a production build, the renderer can be generated
by simply providing the pre-built artifacts to createBundleRenderer.
This is the front end code. A Vue app with Vuex and Vue Router. Vuex and Vue Router are required for a server side rendered application because the server will provide a URL as context when rendering the app which is then used by Vue Router to render the correct page.
- Setup production build
- Add an API route to the server for mocking APIs
- Add JSON Schema validation
- ...?
This project was built using the following resources as a guide: