Skip to content

Commit b2fdecc

Browse files
bietkulbietkul
authored
Merge pull request #304 from appbaseio/feat-react/ssr-support
feat(react-searchbox): ssr support
2 parents b777e33 + 7335a15 commit b2fdecc

2 files changed

Lines changed: 144 additions & 0 deletions

File tree

‎content/docs/reactivesearch/react-searchbox/server-side-rendering.md‎

Lines changed: 142 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,142 @@
1+
---
2+
title: 'Server-side support API Reference'
3+
meta_title: 'Documentation for Server-side support'
4+
meta_description: '@appbaseio/react-searchbox provides server-side rendering support which is compatible with any SSR solution.'
5+
keywords:
6+
- react-searchbox
7+
- server-side rendering
8+
- performance
9+
- search library
10+
- elasticsearch
11+
sidebar: 'docs'
12+
nestedSidebar: 'react-searchbox-reactivesearch'
13+
---
14+
15+
## Introduction to SSR
16+
17+
Server-side rendering (SSR), is the ability of an application to contribute by displaying the web page on the server instead of rendering it in the browser. The Server-side sends a fully rendered page to the client
18+
19+
Some benefits offered by SSR technique
20+
- The initial page of the website load is faster as there are fewer codes to render.
21+
- Good for minimal and static sites.
22+
- Search engines can crawl the site for better SEO.
23+
24+
`@appbaseio/react-searchbox` is compatible with server-side rendering. We provide an API that works with any SSR solution.
25+
26+
27+
## How does it work?
28+
29+
The basic idea of SSR support for `@appbaseio/react-searchbox` is to perform any necessary API calls to the search client and compute the initial state of App, then redyhrate the client side with the initialState computed on the server-side.
30+
31+
We split the concerns into:
32+
33+
- server: the main server entry to serve requested pages.
34+
- client: the main browser entry (ultimately gets compiled to bundle.js).
35+
<br/>
36+
37+
- **Client-side**
38+
39+
The user needs to provide just two props to the `<SearchBase />` component.
40+
41+
- **contextCollector**: used by our library internally to compute the initial state at the server side. _(injected automatically by the server-side code)._
42+
43+
- **initialState**: the initial state of the app that is calculated at the server-side for hydration at client side.
44+
45+
46+
```jsx
47+
const App = (props) => (
48+
<SearchBase
49+
index="good-books-ds"
50+
credentials="a03a1cb71321:75b6603d-9456-4a5a-af6b-a487b309eb61"
51+
url="https://appbase-demo-ansible-abxiydt-arc.searchbase.io"
52+
// below props are coming from the server
53+
contextCollector={props.contextCollector}
54+
initialState={props.initialState}
55+
>
56+
<SearchComponent
57+
id="result-component"
58+
highlight
59+
dataField="original_title"
60+
size={10}
61+
>
62+
{({ results, loading, size, setValue, setFrom }) => {
63+
return (
64+
<div className="result-list-container">
65+
{loading ? (
66+
<div>Loading Results ...</div>
67+
) : (
68+
<div>
69+
{!results.data.length ? (
70+
<div>No results found</div>
71+
) : (
72+
<p>
73+
{results.numberOfResults} results found in {results.time}ms
74+
</p>
75+
)}
76+
{results.data.map((item) => (
77+
<div
78+
className="book-header"
79+
dangerouslySetInnerHTML={{
80+
__html: item.original_title
81+
}}
82+
/>
83+
))}
84+
</div>
85+
)}
86+
</div>
87+
);
88+
}}
89+
</SearchComponent>
90+
</SearchBase>
91+
);
92+
93+
export default App;
94+
95+
```
96+
97+
- **Server-Side**
98+
99+
On the server-side code, the user imports a util method `getServerResults()(..., ...)` to compute the initial state of the App and passes this initial state back to the client-side.
100+
101+
**getServerResults()(App, pageURL)**: the first param of the function receives the `App` component ref and the second param *[optional]* receives the URL string or query param object(should be parsed) to respect the URL query string.
102+
103+
> Assuming [Next.js](https://nextjs.org/) used for SSR here.
104+
105+
```javascript
106+
import { getServerResults } from '@appbaseio/react-searchbox';
107+
108+
// getServerSideProps method is run on server-side by Next.js
109+
export async function getServerSideProps(context) {
110+
111+
// calculating the initial state on server
112+
let initialState = await getServerResults()(App, context.resolvedUrl);
113+
return {
114+
props: { initialState } // will be passed to the App component as props
115+
};
116+
}
117+
118+
```
119+
120+
## Examples
121+
122+
### Using Next.js
123+
124+
<iframe src="https://codesandbox.io/embed/github/appbaseio/searchbox/tree/feat%2Fssr-support/packages/react-searchbox/examples/next-ssr?fontsize=14&hidenavigation=1&theme=dark"
125+
style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;"
126+
title="appbaseio/searchbox"
127+
allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
128+
sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
129+
></iframe>
130+
131+
### Using Express.js
132+
133+
<iframe src="https://codesandbox.io/embed/github/appbaseio/searchbox/tree/feat%2Fssr-support/packages/react-searchbox/examples/with-ssr?fontsize=14&hidenavigation=1&theme=dark"
134+
style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;"
135+
title="appbaseio/searchbox"
136+
allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
137+
sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
138+
></iframe>
139+
140+
## Blog
141+
142+
Consider reading the blog [**here**](https://hashnode.com/preview/6263a659d82f4558aff88d84) we published for SSR support integration in `@appbaseio/react-seasrchbox`.

‎src/data/sidebars/react-searchbox-reactivesearch.yaml‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,3 +11,5 @@
1111
link: /docs/reactivesearch/react-searchbox/searchcomponent/
1212
- title: Examples
1313
link: /docs/reactivesearch/react-searchbox/examples/
14+
- title: Server-side Rendering
15+
link: /docs/reactivesearch/react-searchbox/server-side-rendering/

0 commit comments

Comments
 (0)