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
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
.
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.
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"
}
}
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.
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
An up-to-date version is maintained on gr8s
landing page.
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.