Gr8s Server
gr8s - the graceful smart frontend server
gr8s (pronounced like grace (/ɡreɪs/)) is a specialized server for modern web frontends (e.g. apps made with React, Vue, and similar frameworks). Thanks to its smart features, it reduces your app's development time and hosting costs by a big factor.
Key features:
- Implement SEO in SPA without the pain of SSR
- Simplified development workflow & easy integration
- Better control over SEO content
- Faster server load time for your app
- Much smaller carbon footprint of your infrastructure
Table of Contents
How to integrate gr8s in your workflow?
gr8s replaces your server-side rendering (SSR) logic and infrastructure with a simple server.
You can start using gr8s by following these four steps:
- Configure your tools to generate only the client-side version of your app (i.e. disable SSR).
- Prepare your data source
- Include template tags in your HTML code.
- Serve your app's assets using
gr8s.
1. Configure your app for CSR
If you didn't implement Server-Side Rendering, you can skip this step
Client-Side rending (CSR) means rendering your app is fully done on the client side (i.e. the browser).
The outcome of CSR build process is a set of html, javascript, and css files ready to run by the browser. CSR is pervasively supported by modern Javascript frameworks. Here are some examples of CSR build commands for popular frameworks:
Next.js:
next build && next export
Nuxt.js:
# in nuxt.config.ts, set ssr to false, then
npx nuxi generate
For other frameworks, please consult the respective documentation or consult our issues.
2. Prepare your data source
Data source is a store of the content which should appear in your app's different paths/urls. In its simplest forms, a data source is a JSON file where the key represents the page url and the value is an object of various variables which can be used as template tags (as explained in the next section).
An example data source looks like this:
{
"article/the-internet-s-own-boy": {
"content": "STRAPI BLOG\nNEWS\nTECH\nFOOD\nNATURE\nSTORY\nThe internet's Own boy\n….\n\nBy\n\nAug 9th 2023"
}
}
3. Include template tags in your HTML code
To provide server-side content, gr8s uses a template syntax similar to Jinja.
This means you will need to edit your HTML code (often your index.html file) to add something similar to this code:
<html>
…
<body>
…
<!--{{content}}-->
…
</body>
</html>
In this template, the variable content is replaced by the value associated with the page's url in the data source
you defined in the previous step.
4. Serve your app's assets using gr8s
Now you are ready to replace your SSR server with our leaner alternative.
gr8s is available as a docker image. The app expects the main configuration file
at /etc/gr8s/config.json. Here is an example config.json.
One way to start gr8s would look like this:
docker run \
-v <path-to-your-app-root>:/var/www \
-v <path-to-gr8s-config>:/etc/gr8s \
--network host \
codomatech/gr8s
Frequently Asked Questions
An up-to-date version is maintained on gr8s landing page.
Support Options
gr8s has the potential to offer additional benefits for your app. If you wish to:
- have a snappy user experience (e.g. shorter time to largest contentful paints, smaller blocking time, minimal layout reflows).
- have your app working without Javascript (i.e. implement progressive enhancement).
We offer plans where we do the work for you. Please check our plans.
gr8s is a product of Codoma.tech.
