Comments (5)
I have abandoned server side rendering for my project for the time being (until someone else fixes it).
So one could say I took the Facebook approach.
As I'm in no need for it right now it's not a priority for me to get something like that working.
In case you find yourself needing Server Side Rendering optimization features you can fork the repo and experiment on it.
There's currently no ready-made caching solution as of the time of writing.
from react-pages.
Hey @halt-hammerzeit, can you explain a bit more why you abandoned server side rendering? Was it for performance / caching reasons, complexity reasons, not needed by google anymore, etc?
from react-pages.
@vsaportas AFAIK google can parse javascript-rendered pages if the data is preloaded
http://andrewhfarmer.com/react-seo/
I dropped SSR for now because of the complexity and because I'm not using this framework on some high-load production website - it's just for my small project.
from react-pages.
For me, SEO is the least of my concerns. SSR (and caching) are critical because I have a project with many large images above the fold. The standard method of linking to static assets causes the page to appear broken and jump all over the place as images are loaded in. Embedding 'above the fold' images as data URIs solves this, but causes a long delay of looking at nothing while the script loads.
So I want to cache the rendered html, so that visitors can see content faster, and the moment they see it, it is already complete and doesn't jump all over the place while content loads in. For me, SSR is about the experience a user has while navigating to the site, and caching is about performance. SEO is a very distant concern.
from react-pages.
The standard method of linking to static assets causes the page to appear broken and jump all over the place as images are loaded in.
why aren't you setting height and width then
Embedding 'above the fold' images as data URIs solves this, but causes a long delay of looking at nothing while the script loads.
only small images are applicable to data uri to to max length constraint
So I want to cache the rendered html, so that visitors can see content faster, and the moment they see it, it is already complete and doesn't jump all over the place while content loads in.
Well, you could hook up somewhere in the web service wrapping the render()
call and examining the response.body
and response.status
:
https://github.com/halt-hammerzeit/react-isomorphic-render/blob/master/source/page-server/web%20server.js
Then response.body
could go into some kind of a memory cache and when a new request with the same url comes then return the statics.
Like this:
// Isomorphic rendering (Koa middleware)
web.use(async (ctx) =>
{
// Trims a question mark in the end (just in case)
const url = ctx.request.originalUrl.replace(/\?$/, '')
const total_timer = timer()
const cached = await cache.get(url)
if (cached)
{
ctx.body = cached.content
if (cached.status)
{
ctx.status = cached.status
}
}
// Not simply awaiting for the promise here to prevent Koa waiting for the render
const promise = render_page(settings,
{
application,
assets,
initialize,
localize: localize ? parameters => localize(parameters, get_preferred_locales(ctx)) : undefined,
render,
loading,
html,
authentication,
// The original HTTP request can be required
// for inspecting cookies in `preload` function
request: ctx.req,
// Cookies for authentication token retrieval
cookies: ctx.cookies
})
.then({ status, content, redirect, route, time })
{
if (redirect)
{
return ctx.redirect(redirect)
}
if (stats)
{
stats
({
url: ctx.path + (ctx.querystring ? `?${ctx.querystring}` : ''),
route,
time:
{
...time,
total: total_timer()
}
})
}
const result = { content, status }
cache.put(url, result)
return result
})
if (!cached)
{
const { content, status } = await promise
if (status)
{
ctx.status = status
}
ctx.body = content
}
})
from react-pages.
Related Issues (20)
- Access store outside React scope HOT 4
- Adding json-ld script tags (dynamic) in SSR pages HOT 1
- Can't add custom handler for `@@react-isomorphic-render/goto` event HOT 4
- Error running npm install HOT 1
- The test is failed. (npm install) HOT 1
- usage directions fail at npm install babel-node HOT 1
- SSR middlewares HOT 2
- react-router problem HOT 7
- Http utility in Server Side HOT 11
- how can i run this site? HOT 8
- How modify @preload {client: true} configuration HOT 5
- How to capture an event type HOT 2
- Crash in long running production process (v 2.0.13) HOT 2
- Module not found: Error: Can't resolve './aboutPageReducer' in ...... HOT 1
- Error instantiating router HOT 5
- No way to detect authentication before using http client HOT 2
- [SSR] Access to the request headers HOT 4
- Enable configuration entry for HTTP `on_before_send` HOT 8
- Invalid Content-Type for get and multipart requests HOT 3
- Moving from isomorphic to website causes render service error HOT 12
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-pages.