tizmagik / React Head
Licence: mit
⛑ SSR-ready Document Head tag management for React 16+
Stars: ✭ 262
Programming Languages
javascript
184084 projects - #8 most used programming language
Projects that are alternatives of or similar to React Head
isomorphic-react-redux-saga-ssr
Isomorphic, React, Redux, Saga, Server Side rendering, Hot Module Reloading, Ducks, Code Splitting
Stars: ✭ 19 (-92.75%)
Mutual labels: isomorphic, ssr, server-side-rendering
React App
Create React App with server-side code support
Stars: ✭ 614 (+134.35%)
Mutual labels: isomorphic, ssr, server-side-rendering
Angular Ssr
Angular 4+ server-side rendering solution compatible with @angular/material, jQuery, and other libraries that touch the DOM (as well as providing a rich feature set!)
Stars: ✭ 283 (+8.02%)
Mutual labels: isomorphic, ssr, server-side-rendering
Typescript Hapi React Hot Loader Example
Simple TypeScript React Hot Loading example with Hapi Server-side rendering
Stars: ✭ 44 (-83.21%)
Mutual labels: isomorphic, ssr, server-side-rendering
Razzle Material Ui Styled Example
Razzle Material-UI example with Styled Components using Express with compression
Stars: ✭ 117 (-55.34%)
Mutual labels: isomorphic, ssr, server-side-rendering
movies
Real world isomorphic application for movies search, based on Webpack 5 / Express / React 17 + Redux-Saga / Bootstrap 4.6 + CSS Modules / i18next / SSR
Stars: ✭ 20 (-92.37%)
Mutual labels: isomorphic, ssr, server-side-rendering
webpack-isomorphic-compiler
A compiler that makes your life easier if you are building isomorphic webpack powered apps, that is, single page applications with server-side rendering
Stars: ✭ 16 (-93.89%)
Mutual labels: isomorphic, ssr, server-side-rendering
Hapi React Hot Loader Example
Simple React Hot Loading example with Hapi Server-side rendering
Stars: ✭ 44 (-83.21%)
Mutual labels: isomorphic, ssr, server-side-rendering
Egg Vue Webpack Boilerplate
Egg Vue Server Side Render (SSR) / Client Side Render (CSR)
Stars: ✭ 1,302 (+396.95%)
Mutual labels: isomorphic, ssr, server-side-rendering
Use Ssr
☯️ React hook to determine if you are on the server, browser, or react native
Stars: ✭ 230 (-12.21%)
Mutual labels: isomorphic, ssr, server-side-rendering
Beidou
🌌 Isomorphic framework for server-rendered React apps
Stars: ✭ 2,726 (+940.46%)
Mutual labels: isomorphic, ssr, server-side-rendering
angular-ssr
Angular 14 Example SSR (Server side rendering)
Stars: ✭ 92 (-64.89%)
Mutual labels: ssr, server-side-rendering
issr
The easiest way to move your React application to Server-Side Rendering. Handles Side Effects and synchronizes State.
Stars: ✭ 84 (-67.94%)
Mutual labels: ssr, server-side-rendering
angular-universal-firebase
angular-universal-firebase.firebaseapp.com/
Stars: ✭ 30 (-88.55%)
Mutual labels: ssr, server-side-rendering
react-coat-ssr-demo
Demo with Typescript + React + Redux for server-side-rendering (SSR)
Stars: ✭ 100 (-61.83%)
Mutual labels: ssr, server-side-rendering
Modern-Web-App
React PWA with SSR and Code splitting
Stars: ✭ 45 (-82.82%)
Mutual labels: ssr, server-side-rendering
elegant-react-ssr
Server-side rendering with create-react-app, React Router v4, Helmet, Redux, and Thunk boilerplate, without ejecting CRA
Stars: ✭ 16 (-93.89%)
Mutual labels: ssr, server-side-rendering
ssr-starter-pack
Moved to https://github.com/Brigad/ssr-starter-pack
Stars: ✭ 12 (-95.42%)
Mutual labels: ssr, server-side-rendering
core
🚀Fast, 💎Lightweight Angular alternative with the same modern API thats compile directly to WebComponents
Stars: ✭ 49 (-81.3%)
Mutual labels: ssr, server-side-rendering
react-ssr-starter
📚 Featuring Webpack 4, React 17-18, SSR, HMR, prefetching, universal lazy-loading, and more
Stars: ✭ 18 (-93.13%)
Mutual labels: isomorphic, ssr
react-head 
Asynchronous SSR-ready Document Head management for React 16.3+
Motivation
This module allows you to define document.head tags anywhere in your component hierarchy. The motivations are similar to react-helmet in that you may only have the information for certain tags contextually deep in your component hiearchy. There are no dependencies (it does not use react-side-effects) and it should work fine with asynchronous rendering; the only requirement is React 16.3+.
Read more about react-head and how it works on Medium
Installation
npm i react-head
or
yarn add react-head
How it works
- You wrap your App with
<HeadProvider /> - From the server, you pass
headTags[]array to<HeadProvider /> - Then call
renderToStaticMarkup(headTags)and include in the<head />block of your server template - To insert head tags within your app, just render one of
<Title />,<Meta />,<Style />,<Link />, and<Base />components as often as needed.
On the server, the tags are collected in the headTags[] array, and then on the client the server-generated tags are removed in favor of the client-rendered tags so that SPAs still work as expected (e.g. in cases where subsequent page loads need to change the head tags).
You can view a fully working sample app in the /example folder.
Server setup
Wrap your app with <HeadProvider /> on the server, using a headTags[] array to pass down as part of your server-rendered payload. When rendered, the component mutates this array to contain the tags.
import * as React from 'react';
import { renderToString } from 'react-dom/server';
import { HeadProvider } from 'react-head';
import App from './App';
// ... within the context of a request ...
const headTags = []; // mutated during render so you can include in server-rendered template later
const app = renderToString(
<HeadProvider headTags={headTags}>
<App />
</HeadProvider>
);
res.send(`
<!doctype html>
<head>
${renderToString(headTags)}
</head>
<body>
<div id="root">${app}</div>
</body>
</html>
`);
Client setup
There is nothing special required on the client, just render one of head tag components whenever you want to inject a tag in the <head />.
import * as React from 'react';
import { HeadProvider, Title, Link, Meta } from 'react-head';
const App = () => (
<HeadProvider>
<div className="Home">
<Title>Title of page</Title>
<Link rel="canonical" href="http://jeremygayed.com/" />
<Meta name="example" content="whatever" />
// ...
</div>
</HeadProvider>
);
Contributing
Please follow the contributing docs
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].