I've been into the styled-components package and I think the developer-friendliness is awesome!
However, I'm worried about 1 thing: Flash Of Unstyled Content.
Since in production, as well as in development, the styles get packaged with the javascript chunks; When a component is loaded, the styles are generated and appended (at the bottom of) the <head>.
This is inherently the same as how CSS Modules work.
Referring to a post of surviveJS I learned to use ExtractTextPlugin to create separate stylesheets (css files) during the production build step.
However, in styled-components CSS is just JS, so we can't use that technique (at least, I couldn't get it to work).
So before I start building my next project with styled-components, can someone take my worries away?
If you don't want to have your UI flash - you need to send your styles from the server instead of rendering using JS. Fortunately, styled-componnets library supports server rendering API, even though it is not public at this moment.
You can pre-render your styles on a server, and inject into your initial html you send from the server, so it will contain CSS and UI won't flash.
As I mentioned, API is not public yet, but you can use it. There are multiple discussions about this on a Github, please, check: this, this and more issues. I guess public API should be ready in a v2 release.
So basically there are should be no issues with using styled-components to prevent flashing.
SSR is coming in v2 which you can start using today. Here is an example of how to do it.
https://github.com/styled-components/styled-components/blob/v2/example/ssr.js
Related
The app
The application was made using ReactJS, React Router Dom, Styled Components and Redux ducks.
The backend we consume is also made by us using Amazon Amplify and GraphQL.
The goal
We need to define the meta tags of one of the application pages so that it is possible to share personalized links to users
in social networks using OpenGraphic meta tags and the like.
The problem
The project was made in ReactJS and ReactJS has only one HTML page as root (/public/index.html), in this way, everything is generated with Javascript in a root tag, and when it arrives in the browser it is transpiled, as we already know. The problem is that the crawlers responsible for understanding the meta tags are not able to understand Javascript and end up not finding the dynamic data that I am defining on the page that I need to share the link on. They understand that there is one html file and only.
Attempts to resolve the issue
1) Define the meta tags in the /public/index.html file itself
This solution doesn't work because the data we are using is dynamic and the index.html file is a static file
2) Using react-helmet
The solution allows meta tags to be defined, but as already mentioned, crawlers don't understand JS. So, despite being on the page, the meta tags do not appear when sharing the link.
3) Using some SSR technology
This is a possible solution, but we were unable to integrate any SSR Framework into React. And it is not feasible to change the base technology of the project. We can't just switch from React to Next, for example, as the project is already complete.
4) Using a small server made with express.js along with the React application to replace the meta tags in index.html with string.replace() simulating something like an SSR
This solution works, but it causes two requests to be made every time the page is accessed, once by express.js and once on the front-end side by React. Due to the number of requests increasing, this solution was discarded. But if necessary, you can do it. In this case it is also necessary to check if Amplify can keep the application and the small server running in the same project.
5) Using react-snap with react-helmet
React-snap allows you to create html snapshots of the pages of a React project based on their routes and links, this added to react-helmet generates a perfect solution for links to be treated well by web crawlers when they are shared. But the solution doesn't work with dynamic routes. For example, /your-route/:id is a dynamic route that expects an id to be fully defined. React-snap gets lost when trying to create a snapshot of a route that only exists when the id is set. Unfortunately, this solution doesn't work.
These were the solutions we used to try to solve the problem, but it was not possible yet. Probably attempt 4 would be the most ideal to solve the problem. But we are looking for the best way that will not generate reworks and future problems. If someone knows a better way to do that, would help us a lot!
I'm using react-meta-tags to add/update the meta tags in my react site. While it works fine, I noticed that there are plenty of tags added in, which has the styles present in my css files. These tags were not present when I was not using react-meta-tags.
Now, is it okay for these tags to be present in ? How will it affect my site if I leave it as it is? Should I leave it as it is? I would appreciate it if you could give me a detailed explanation, since I'm new to SEO (and web-development) and have a very shallow understanding of it right now.
Its necessary for these tags to be present. What happens is that you don't ship your actual code to production, you minimize it and then bundle it for that. Since you are using react , the browser cant support JSX on its own so react automatically bundles you code in (runtime as well although not as efficient as in production) and converts JSX to different HTML, CSS and JS files(in minimized form) to ensure you site works fast and reliably without any support issue from different browser.So don't worry about that. While it does enable faster reloading and better performance in general which helps with google rankings but SEO is a different game altogether, you need Server Side Rendering for that and assuming you are using create-react-app you are using with Client Side Rendering. My suggestion don't focus on SEO and just ensure you are using Sematic elements that would be enough for now.
Anyone have any experience converting a react app created with create-react-app to using server side rendering and code splitting via loadable-components? I know this is a general question, but mostly looking for general guidance or any major red flags for this approach. I'd like to keep the nice things you get out of box with create-react-app - especially the live reload dev environment - while adding in optimizations using SSR and code splitting. I was able to mostly get this working using express backend and handlebars templating, but I'm facing many challenges getting code splitting working correctly with this setup. Any hints / stories are appreciated!
There is craco "an easy and comprehensible configuration layer for create-react-app".
Webpack custom configurations go into craco.config.js, inside root folder.
SSR is possible, you can check two related questions that might help you with your case:
Code splitting loads all chunk files on chrome but load them separately in firefox
Loadable Components SSR - chunkNames in Server Stats file different from Client stats file
I am using React in my project and I have problem with client-side prerendering.
More specifically, it would be necessary to configure SEO
Which is the least painless way to prerender existing reactjs app wiht react-routes
Some examples I have researched:
Gatsby.js - https://www.gatsbyjs.org/docs/porting-from-create-react-app-to-gatsby/
Next.js - https://nextjs.org/docs#custom-document
Netlify - https://dev.to/joelvarty/prerender-your-spa-using-netlify-for-better-seo-3h87
React-snap - https://web.dev/prerender-with-react-snap/
Prerender.io - https://prerender.io/
Keen’s Server Side Rendered - https://medium.com/keen-studio/keens-server-side-rendered-react-wordpress-rest-api-boilerplate-bb58edb7cc0a
Razzle - https://reactresources.com/topics/razzle
React Helmet - https://github.com/nfl/react-helmet
Can anyone suggest what option I should choose that is the least painless.
I have headless wordpress as backend and reactjs client-side as frontend.
Or are there other faster options besides the prerendering?
Thanks.
IMO you really don't need to use a framework to achieve SSR if you want to keep control without turning your codebase into a blackbox and choose your own stack.
I created some boilerplate using Node Express. It supports:
SSR using StaticRouter on the server and BrowserRouter in the client
ES6 webpack transpilation + hot reloading both client and server and auto-updating browser
Redux, data preloading and client store hydration
https://github.com/kimgysen/isomorphic-react-setup
Last time I ran it, I noticed that I hadn't saved the favIcon in the public folder and perhaps there are some minor bugs that I will fix soon (I've fixed them in my projects but didn't update this repo because nobody looks at it anyway (lol!)), but what happens here isn't all that difficult to understand.
I created some basic SSR websites with it in a matter of hours.
I enjoy redux-observable to initiate server ajax calls before rendering the content (using forkJoin), but this is not included in the boilerplate (I haven't actually supported it since I uploaded the first time).
But in terms of setup, I don't really see a point in using a framework for this necessarily, it really isn't that painful / difficult to do yourself.
The benefit that I particularly like is that you don't depend yourself on the scope and dependencies of the framework. You don't get into trouble with things like 'the framework will support this feature or fix that bug in one of the upcoming releases'.
Although ultimately, it comes down to personal choice. So it's not like I want to downgrade these frameworks.
Note: The way Redux achieves pre-rendering is simply by adding Redux store (state) objects to the window object in the html that is sent back to the client.
Then at the client, the it initializes the stores with these objects.
So very simply, this is something that is easy to achieve, even if you decide not to implement any other SSR features.
to create server side applicantion with painless integration you can use my cli to generate a default configuration like create react app cli from facebook, https://github.com/ghondar/crassa
How to inject react component into handlebar template which is loading dynamically at run time.
edit: tl;dr: This is a great question. Injecting pre-rendered React components into an html templating language (like handlebars) can improve the load times of your site and improve the "indexability" of your content for search engines (your SEO). the trick is you have to server-side render (SSR) and you don't want to load all of the code into the browser on the initial request so you need code-splitting. These can be accomplished with webpack. Until recently they have not been possible without a framework like Next.js... There are now 3 options, and the conclusion I have come to is that the only one worth using is: React-Universal-Component
If you want to learn more about the benefits you get from rendering your content into HTML before the JS assets, CSS assts, etc. are loaded, this article on Isomorphic or Universal Javascript is a good place to start. Writing Isomorphic/Universal JavaScript is about writing code that is flexible in its ability to render client-side or server-side.
There are a couple if React top-level APIs that make this easy, and a handful of transpiling/compiling/bundling libraries (I use Webpack), that are necessary (if you don't want to compile the template in the browser).
Because React components are almost always written in JSX they must be transpiled to JavaScript before they can be rendered. This is typically done with ReactDOM.render() which will call React.createElement() for us.
React also has a function, ReactDOMServer.renderToString() which takes the React element, builds the HTML (on the server-side) and converts it into a string. This is what enables us to inject pre-rendered React into html templates.
For an example of the process which I have just described, see this example, but it's out of date now.
Conclusion: Injecting a React component into a handlebar template is not worth its time because there are finally libraries to help us do this (see my first link). IMO SSR React is important for sites that need the SEO benefits, and it will also improve your load times (especially on under-powered devices) if your app properly performs SSR and code-splitting.