eleventy-plugin-react-ssr
This plugin allows you to write your Eleventy content using JSX as a template language, and render it using React server-side render.
Installation
yarn add --dev eleventy-plugin-jsxUsage
Enabling the plugin
The first step is to enable the plugin in your Eleventy config
// .eleventy.js
const eleventyReactSSRPlugin = require('eleventy-plugin-react-ssr');
module.exports = function (eleventyConfig) {
eleventyConfig.addPlugin(eleventyReactSSRPlugin);
};Plugin configuration
This plugin uses Babel to transpile JSX files. It is possible to pass any Bable config as plugin configuration using the
property babelConfig. For example, you can provide your own Babel plugins:
const eleventyReactSSRPlugin = require('eleventy-plugin-react-ssr');
module.exports = function (eleventyConfig) {
eleventyConfig.addPlugin(eleventyReactSSRPlugin, {
babelConfig: {
plugins: [['inline-react-svg', { svgo: false }]],
},
});
};Writing pages
Just use the extension .jsx for your page, and write it using JSX.
Pages are expected to have a default export with the main component (either Function Component or Class Component, both will work):
function MyPage() {
return <h1>Hello world</h1>;
}
export default MyPage;Defining page data
If you need to define page data (similar to a front matter in a Markdown page), use the static property data
function MyPage() {
return <h1>Hello world</h1>;
}
MyPage.data = {
title: 'Hello world',
layout: 'main',
permalink: 'hello.html',
customData: {
foo: 'bar',
},
};
export default MyPage;Using page data
You may want to use the data provided by Eleventy in your page. This can be done using React Context and a hook:
import EleventyContext from 'eleventy-plugin-react-ssr/context';
import { useContext } from 'react';
function MyPage() {
// Access to anything from the data cascade, including page data
// and Eleventy supplied data from https://www.11ty.dev/docs/data-eleventy-supplied/
const { title, customData, page } = useContext(EleventyContext);
return (
<>
<h1 className={customData.foo}>{title}</h1>
<p>URL: {page.ur}</p>
</>
);
}
MyPage.data = {
title: 'Hello world',
customData: {
foo: 'bar',
},
};
export default MyPage;Writing layouts
It is possible to write layouts using JSX too. However, I'll recommend to only use layouts if the content comes from a diffrent template language (eg: you have content in Markdown that you'd like to render inside a JSX layout). If you want to do "JSX in JSX" (content in JSX, layout in JSX as well), check the next section.
// page.md
---
layout: layout/main.jsx
title: My page
---
My page is aweseome// _includes/layout/main.jsx
import EleventyContext from 'eleventy-plugin-react-ssr/context';
import { useContext } from 'react';
function MainLayout() {
const { content, title } = useContext(EleventyContext);
return (
<>
<h1>{title}</h1>
<div dangerouslySetInnerHTML={{ __html: content }} />
</>
);
}
export default MainLayout;Page components
If you don't have content in other template languages (ie: all your pages are JSX), then I'd recommend to not use layouts, and use components instead.
// ./_includes/components/html-page.jsx
export function HTMLPage({ lang, children }) {
return (
<html lang={lang}>
<head>{/* Link to styles, scripts, etc. */}</head>
<body>{children}</body>
</html>
);
}// page.jsx
import { HTMLPage } from './_includes/components/html-page';
function MyPage() {
return (
<HTMLPage lang="en">
<h1>Hello world</h1>
</HTMLPage>
);
}
export default MyPage;This way, the page will be JSX all the way to the end, and you can pass props to the page component.
If you really want to, you can use a JSX layout for a JSX page. It will work, but it will be a bit hacky as you need to
use dangerouslySetInnerHTML to render it, and use page data to simulate passing props.