Customization hooks
You can customize the behavior of a Rakkas app by defining customization hooks in the files src/server.js
or src/client.js
for the server and the client respectively. You can also use the extensions .jsx
, .ts
, or .tsx
.
Customization hooks are not related to React hooks.
Server-side customization hooks
You can fully customize the way Rakkas renders and serves a page by exporting a servePage
function from the file src/server.{js|ts|jsx|tsx}
. It can be useful for the following purposes:
- Initializing the root context
- Wrapping your server-side app in a provider component (some React libraries require it for SSR support)
- Outputting custom content in the returned HTML head element
- Using a custom
renderToString
function (e.g.renderToStringWithData
from Apollo client) - Creating server-side load helpers
- Adding or modifying HTTP headers of returned page responses (e.g.
Cache-Control
)
import { ServePageHook } from "rakkasjs";
export const servePage: ServePageHook = async (request, renderPage) => {
// You can manipulate the request object here before passing it to renderPage
const response = await renderPage(
request,
{
// Initialize your root context here
userId: await getUserIdFromRequest(request),
},
{
createLoadHelpers: (fetch) => ({
// Initialize your server-side load helpers here
}),
wrap: (page) => (
// You can wrap the server-side app in a provider here.
// Useful for integrating with, e.g., Redux, styled-components, Apollo client etc.
<SomeProvider>{page}</SomeProvider>
),
// You can use a custom renderer instead of React DOM's renderToString.
// Useful for integrating with e.g. Apollo client (renderToStringWithData)
renderToString: (app) => someCustomRenderer(app),
// You can add extra head HTML here.
// Useful for integrating with, e.g., Redux, styled-components, Apollo client etc.
getHeadHtml() {
return `<title>My App</title>`;
},
},
);
// You can modify the response object here before returning
// e.g. by adding a Cache-Control header
return response;
};
Client-side customization hooks
You can customize the client-side behavior of Rakkas by exporting certain hooks from the file src/client.{js|ts|jsx|tsx}
. It can be useful for the following purposes:
- Doing initialization work before client-side hydration
- Wrapping your client-side app in a provider component (some React libraries require it)
- Creating client-side load helpers
import { defineClientHooks } from "rakkasjs";
export default defineClientHooks({
beforeStartClient(rootContext) {
// Do initialization work before hydration
// If you return a promise, Rakkas will delay hydration until it resolves
},
wrap(app, rootContext) {
// You can wrap the client-side app in a provider here.
// Useful for integrating with, e.g., Redux, Apollo client etc.
return <SomeProvider>{app}</SomeProvider>;
},
createLoadHelpers(rootContext) {
return {
// Initialize your client-side load helpers here
};
},
});
Common customization hooks
Some hooks need to run in both server and client-side. You can define them in the file src/common.{js|ts|jsx|tsx}
.
import { defineCommonHooks } from "rakkasjs";
export default defineCommonHooks({
// You can define common hooks here
extractLocale(url) {
// You can extract the locale from and optionally rewrite the URL here
return { locale: "en" };
},
});