React Server Components Performance on SEO

0 votes

React Server Components has recently been released, comparing to SSR/Next.js, how does it affect SEO?

Since the component is rendered in the server dynamically when it is requested, it is not really as static as SSR like Next.js, will search engine fail to index those component if I use it?

A demo can found here

We can see that in api.server.js,

async function renderReactTree(res, props) {
  await waitForWebpack();
  const manifest = readFileSync(
    path.resolve(__dirname, '../build/react-client-manifest.json'),
    'utf8'
  );
  const moduleMap = JSON.parse(manifest);
  pipeToNodeWritable(React.createElement(ReactApp, props), res, moduleMap);
}

function sendResponse(req, res, redirectToId) {
  const location = JSON.parse(req.query.location);
  if (redirectToId) {
    location.selectedId = redirectToId;
  }
  res.set('X-Location', JSON.stringify(location));
  renderReactTree(res, {
    selectedId: location.selectedId,
    isEditing: location.isEditing,
    searchText: location.searchText,
  });
}

I understand this can help to reduce the workload for client's device, since the component are rendered on the server and sent to the client, and that the component can be rendered with the secret stored in server as we can just pass it in as props rather we sending the secret to client.

But if SEO matters, is SSR preferred over React Server Component?

Feb 24, 2022 in Others by Kichu
• 19,050 points
608 views

1 answer to this question.

0 votes

const html = readFileSync(
      path.resolve(__dirname, '../build/index.html'),
      'utf8'
    );
    // Note: this is sending an empty HTML shell, like a client-side-only app.
    // However, the intended solution (which isn't built out yet) is to read
    // from the Server endpoint and turn its response into an HTML stream.
    res.send(html);
use this code as a reference
Server Components were not released. What was released is an early tech preview in the spirit of sharing our research. This preview doesn’t include an HTML renderer

If you need to know more about React, Its recommended to join React Certification Course today.

answered Feb 25, 2022 by narikkadan
• 63,420 points

Related Questions In Others

0 votes
0 answers

How implement SEO (Metatags) in Angular 2 (with Angular universal for rendering on server side)?

I'm searching a fully working example about ...READ MORE

Feb 21, 2022 in Others by Kichu
• 19,050 points
642 views
0 votes
1 answer

How implement SEO (Metatags) in Angular 2 (with Angular universal for rendering on server side)?

https://github.com/angular/universal-starter follow this repo among it there ...READ MORE

answered Feb 22, 2022 in Others by narikkadan
• 63,420 points
871 views
0 votes
1 answer

How implement SEO (Metatags) in Angular 2 (with Angular universal for rendering on server side)?

 in this https://github.com/angular/universal-starter you can see  angular-meta.ts service that handles ...READ MORE

answered Feb 26, 2022 in Others by narikkadan
• 63,420 points
476 views
0 votes
1 answer

How to deploy flutter web on server?

Hi@akhtar, To create a production build for the ...READ MORE

answered Sep 15, 2020 in Others by MD
• 95,440 points
2,802 views
0 votes
1 answer

array of LocalBusinessJsonLd Schema using next-seo

specify the unique keyoverride properties if you ...READ MORE

answered Feb 14, 2022 in Others by narikkadan
• 63,420 points
730 views
0 votes
1 answer
0 votes
0 answers

I have a problem hosting a project made in Next.js

I have Next.js project. When I connect ...READ MORE

Jan 27, 2023 in Others by Tejashwini
• 3,820 points
184 views
0 votes
1 answer

React Server Components Performance on SEO

for rendering into html  you have to ...READ MORE

answered Feb 14, 2022 in Others by narikkadan
• 63,420 points
432 views
0 votes
1 answer

Laravel , Blade & React js add the meta tag for rendering on server side SEO

use septia laravel side rendering and add ...READ MORE

answered Feb 24, 2022 in Others by narikkadan
• 63,420 points
1,390 views
webinar REGISTER FOR FREE WEBINAR X
REGISTER NOW
webinar_success Thank you for registering Join Edureka Meetup community for 100+ Free Webinars each month JOIN MEETUP GROUP