POC: serverless server side rendering for InstantSearch.js #5579
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,157 @@ | ||
| # InstantSearch.js SSR POC | ||
|
|
||
| This is a proof of concept for server-side rendering with InstantSearch.js, where the consumer does not themselves render in the server. | ||
|
|
||
| ## Usage | ||
|
|
||
| 1. The consumer sets up their configuration of InstantSearch.js in two files. One is a JavaScript file that instantiates InstantSearch.js and adds widgets. The other is an HTML file that contains the markup for the widgets. This could be set up through the dashboard in a later iteration. | ||
|
|
||
| ```js | ||
| // instantsearch-code.js | ||
| /* global algoliasearch instantsearch */ | ||
|
|
||
| const searchClient = algoliasearch( | ||
| 'latency', | ||
| '6be0576ff61c053d5f9a3225e2a90f76' | ||
| ); | ||
|
|
||
| window.search = instantsearch({ | ||
| indexName: 'instant_search', | ||
| searchClient, | ||
| routing: true, | ||
| }); | ||
|
|
||
| window.search.addWidgets([ | ||
| instantsearch.widgets.currentRefinements({ | ||
| container: '#current-refinements', | ||
| }), | ||
| instantsearch.widgets.searchBox({ | ||
| container: '#searchbox', | ||
| }), | ||
| instantsearch.widgets.refinementList({ | ||
| container: '#refinement-list', | ||
| attribute: 'brand', | ||
| }), | ||
| instantsearch.widgets.rangeInput({ | ||
| container: '#range', | ||
| attribute: 'price', | ||
| }), | ||
| instantsearch.widgets.toggleRefinement({ | ||
| container: '#toggle', | ||
| attribute: 'free_shipping', | ||
| }), | ||
| instantsearch.widgets.hits({ | ||
| container: '#hits', | ||
| templates: { | ||
| item: (hit, { html, components }) => | ||
| html`<div>${components.Highlight({ hit, attribute: 'name' })}</div>`, | ||
| }, | ||
| }), | ||
| instantsearch.widgets.pagination({ | ||
| container: '#pagination', | ||
| }), | ||
| ]); | ||
| ``` | ||
|
|
||
| The HTML file is split up in different templates, which are used for the base of the server-rendered page. | ||
|
|
||
| ```html | ||
| <!-- instantsearch-code.html --> | ||
| <x-template id="header"> | ||
| <div id="searchbox"></div> | ||
| </x-template> | ||
|
|
||
| <x-template id="filters"> | ||
| <div id="refinement-list"></div> | ||
| <div id="range"></div> | ||
| <div id="toggle"></div> | ||
| </x-template> | ||
|
|
||
| <x-template id="body"> | ||
| <div id="current-refinements"></div> | ||
| <div id="hits"></div> | ||
| <div id="pagination"></div> | ||
| </x-template> | ||
|
|
||
| <x-template id="scripts"> | ||
| <!-- You can use third-party scripts or code, as in your regular page --> | ||
| <script | ||
| src="https://code.jquery.com/jquery-3.6.4.slim.min.js" | ||
| integrity="sha256-a2yjHM4jnF9f54xUQakjZGaqYs/V1CYvWpoqZzC2/Bw=" | ||
| crossorigin="anonymous" | ||
| ></script> | ||
| </x-template> | ||
|
|
||
| <x-template id="styles"> | ||
| <!-- You can set up styles, we make sure they aren't loaded in our server --> | ||
| <link | ||
| rel="stylesheet" | ||
| href="https://cdn.jsdelivr.net/npm/[email protected]/themes/satellite-min.css" | ||
| /> | ||
| </x-template> | ||
| ``` | ||
|
|
||
| 2. The consumer calls our API in their server and receives different blocks of HTML to render in their page. | ||
|
|
||
| ```js | ||
| async function handler(req, res) { | ||
| const { templates, resources } = await fetch( | ||
| `http://localhost:3000?url=${encodeURIComponent(req.url)}` | ||
| ).then((response) => response.json()); | ||
|
|
||
| res.writeHead(200, { 'Content-Type': 'text/html' }); | ||
| res.end(` | ||
| <html> | ||
| <head> | ||
| <meta charset="utf-8" /> | ||
| <title>This is the consumer</title> | ||
| ${templates.styles} | ||
| <style> | ||
| body { | ||
| font-family: sans-serif; | ||
| } | ||
| </style> | ||
| </head> | ||
| <body> | ||
| <header>${templates.header}</header> | ||
| <main style="display: grid; grid-template-columns: 1fr 3fr"> | ||
| <div>${templates.filters}</div> | ||
| <div>${templates.body}</div> | ||
| </main> | ||
| ${resources.scripts} | ||
| </body> | ||
| </html>`); | ||
| } | ||
| ``` | ||
|
|
||
| 3. This page then gets rendered in the browser, and the widgets are hydrated. | ||
|
|
||
| The consumer code can be found in [consumer-server.js](./consumer-server.js). Their InstantSearch configuration can be found in [instantsearch-code.js](./instantsearch-code.js) and [instantsearch-code.html](./instantsearch-code.html). | ||
|
|
||
| ## How it works | ||
|
|
||
| When the consumer calls our API, we do the following: | ||
|
|
||
| 1. We load the HTML file in JSDOM. | ||
| 2. We evaluate the JavaScript file in JSDOM. | ||
| 3. We execute the search and render the widgets. | ||
| 4. We extract the HTML templates from the page. | ||
| 5. We return this, as well as a little script to hydrate the widgets. | ||
|
|
||
| The API can be found in [instantsearch-server.js](./instantsearch-server.js). | ||
|
|
||
| ## Conclusion | ||
|
|
||
| It's possible to render InstantSearch.js widgets on the server, without the consumer having to do it themselves. This is a proof of concept, and there are still some things to do: | ||
|
|
||
| - Find a safe way to evaluate the JavaScript file. While this is likely running in a sandboxed environment, it's still a security risk. We could use v8 isolates, but that isn't trivial to set up. | ||
| - Evaluate the performance of this approach. | ||
|
|
||
| ## Alternatives | ||
|
|
||
| - We could use a headless browser instead of JSDOM, but that would be slower. | ||
| - We also could use Preact's server rendering, but that would require us to expose the Preact components from the widgets somehow, and not work with custom connectors. | ||
|
|
||
| ## Questions | ||
|
|
||
| - Is a static template enough for consumers, or do they need to read variables that get set in their server runtime. If that would be needed, the instantsearch-code.html file could be passed to the API at runtime, instead of being loaded once. |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,32 @@ | ||
| import http from 'node:http'; | ||
|
|
||
| async function handler(req, res) { | ||
| const { templates, resources } = await fetch( | ||
| `http://localhost:3000?url=${encodeURIComponent(req.url)}` | ||
| ).then((response) => response.json()); | ||
|
|
||
| res.writeHead(200, { 'Content-Type': 'text/html' }); | ||
| res.end(` | ||
| <html> | ||
| <head> | ||
| <meta charset="utf-8" /> | ||
| <title>This is the consumer</title> | ||
| ${templates.styles} | ||
| <style> | ||
| body { | ||
| font-family: sans-serif; | ||
| } | ||
| </style> | ||
| </head> | ||
| <body> | ||
| <header>${templates.header}</header> | ||
| <main style="display: grid; grid-template-columns: 1fr 3fr"> | ||
| <div>${templates.filters}</div> | ||
| <div>${templates.body}</div> | ||
| </main> | ||
| ${resources.scripts} | ||
| </body> | ||
| </html>`); | ||
| } | ||
|
|
||
| http.createServer(handler).listen(8080); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,30 @@ | ||
| <x-template id="header"> | ||
| <div id="searchbox"></div> | ||
| </x-template> | ||
|
|
||
| <x-template id="filters"> | ||
| <div id="refinement-list"></div> | ||
| <div id="range"></div> | ||
| <div id="toggle"></div> | ||
| </x-template> | ||
|
|
||
| <x-template id="body"> | ||
| <div id="current-refinements"></div> | ||
| <div id="hits"></div> | ||
| <div id="pagination"></div> | ||
| </x-template> | ||
|
|
||
| <x-template id="scripts"> | ||
| <script | ||
| src="https://code.jquery.com/jquery-3.6.4.slim.min.js" | ||
| integrity="sha256-a2yjHM4jnF9f54xUQakjZGaqYs/V1CYvWpoqZzC2/Bw=" | ||
| crossorigin="anonymous" | ||
| ></script> | ||
| </x-template> | ||
|
|
||
| <x-template id="styles"> | ||
| <link | ||
| rel="stylesheet" | ||
| href="https://cdn.jsdelivr.net/npm/[email protected]/themes/satellite-min.css" | ||
| /> | ||
| </x-template> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,43 @@ | ||
| /* global algoliasearch instantsearch */ | ||
|
|
||
| const searchClient = algoliasearch( | ||
| 'latency', | ||
| '6be0576ff61c053d5f9a3225e2a90f76' | ||
| ); | ||
|
|
||
| window.search = instantsearch({ | ||
| indexName: 'instant_search', | ||
| searchClient, | ||
| routing: true, | ||
| }); | ||
|
|
||
| window.search.addWidgets([ | ||
| instantsearch.widgets.currentRefinements({ | ||
| container: '#current-refinements', | ||
| }), | ||
| instantsearch.widgets.searchBox({ | ||
| container: '#searchbox', | ||
| }), | ||
| instantsearch.widgets.refinementList({ | ||
| container: '#refinement-list', | ||
| attribute: 'brand', | ||
| }), | ||
| instantsearch.widgets.rangeInput({ | ||
| container: '#range', | ||
| attribute: 'price', | ||
| }), | ||
| instantsearch.widgets.toggleRefinement({ | ||
| container: '#toggle', | ||
| attribute: 'free_shipping', | ||
| }), | ||
| instantsearch.widgets.hits({ | ||
| container: '#hits', | ||
| templates: { | ||
| item: (hit, { html, components }) => | ||
| html`<div>${components.Highlight({ hit, attribute: 'name' })}</div>`, | ||
| }, | ||
| }), | ||
| instantsearch.widgets.pagination({ | ||
| container: '#pagination', | ||
| }), | ||
| ]); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,113 @@ | ||
| import http from 'node:http'; | ||
| import { JSDOM, ResourceLoader } from 'jsdom'; | ||
| import { readFile } from 'node:fs/promises'; | ||
|
|
||
| import { | ||
| getInitialResults, | ||
| waitForResults, | ||
| } from 'instantsearch.js/es/lib/server.js'; | ||
|
|
||
| // eslint-disable-next-line @typescript-eslint/no-unused-vars | ||
| import instantsearch from 'instantsearch.js/dist/instantsearch.development.js'; | ||
| // eslint-disable-next-line @typescript-eslint/no-unused-vars | ||
| import algoliasearch from 'algoliasearch/dist/algoliasearch-lite.esm.browser.mjs'; | ||
|
|
||
| class CustomResourceLoader extends ResourceLoader { | ||
| fetch(url, options) { | ||
| if (options.element.name === 'HTMLLinkElement') { | ||
| return Promise.resolve(Buffer.from('')); | ||
| } | ||
|
|
||
| return super.fetch(url, options); | ||
| } | ||
| } | ||
|
|
||
| http | ||
| .createServer(async (req, res) => { | ||
| const clientURL = new URL( | ||
| req.url, | ||
| 'http://localhost:3000' | ||
| ).searchParams.get('url'); | ||
|
|
||
| const { window } = new JSDOM( | ||
| await readFile( | ||
| new URL('./instantsearch-code.html', import.meta.url), | ||
| 'utf-8' | ||
| ), | ||
| { | ||
| url: new URL(clientURL, 'http://localhost:3000'), | ||
| resources: new CustomResourceLoader(), | ||
| runScripts: 'dangerously', | ||
| } | ||
| ); | ||
|
|
||
| await new Promise((resolve) => { | ||
| window.addEventListener('load', resolve); | ||
| }); | ||
|
|
||
| window.setTimeout = setTimeout; | ||
| window.setInterval = setInterval; | ||
|
|
||
| Object.assign(global, window, { | ||
| window, | ||
| // @TODO: how to add all global window properties? | ||
| HTMLElement: window.HTMLElement, | ||
| XMLHttpRequest: window.XMLHttpRequest, | ||
| }); | ||
|
|
||
| const code = await readFile( | ||
| new URL('./instantsearch-code.js', import.meta.url), | ||
| 'utf-8' | ||
| ); | ||
|
|
||
| const { search } = createDOM(code); | ||
|
|
||
| search._initialResults = {}; | ||
| search.start(); | ||
| search.sendEventToInsights = () => {}; | ||
|
|
||
| await waitForResults(search); | ||
| const initialResults = getInitialResults(search.mainIndex); | ||
| search.mainIndex.render({ | ||
| instantSearchInstance: search, | ||
| }); | ||
|
|
||
| const templates = Object.fromEntries( | ||
| Array.from(document.querySelectorAll('x-template')).map((template) => [ | ||
| template.id, | ||
| template.innerHTML, | ||
| ]) | ||
| ); | ||
|
|
||
| res.writeHead(200, { 'Content-Type': 'application/json' }); | ||
| res.end( | ||
| JSON.stringify( | ||
| { | ||
| templates, | ||
| resources: { | ||
| scripts: ` | ||
| <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/instantsearch.production.min.js"></script> | ||
| <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/algoliasearch.umd.min.js"></script> | ||
| <script> | ||
| ${code}; | ||
| search._initialResults = ${JSON.stringify(initialResults)}; | ||
| search.start(); | ||
| </script> | ||
| `, | ||
| }, | ||
| }, | ||
| null, | ||
| 2 | ||
| ) | ||
| ); | ||
| }) | ||
| .listen(3000); | ||
|
|
||
| function createDOM(code) { | ||
| window.search = undefined; | ||
|
|
||
| // eslint-disable-next-line no-eval | ||
| eval(code); | ||
|
|
||
| return { search: window.search }; | ||
| } | ||
|
Comment on lines
+106
to
+113
There was a problem hiding this comment. this should also be in an isolated part of the code |
||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,10 @@ | ||
| { | ||
| "name": "example-instantsearch-server-rendering", | ||
| "version": "1.0.0", | ||
| "type": "module", | ||
| "dependencies": { | ||
| "instantsearch.js": "4.54.0", | ||
| "algoliasearch": "4.14.3", | ||
| "jsdom": "21.1.1" | ||
| } | ||
| } |
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
in a real use case, we wouldn't add these all in current global scope, but as exposed variables to the isolate which runs the instantsearch code.