Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

render-to-static-markup #65

Merged
merged 2 commits into from
Jun 23, 2023

Conversation

nafistiham
Copy link
Collaborator

No description provided.

@github-actions
Copy link

github-actions bot commented Jun 22, 2023

Size changes

📦 Next.js Bundle Analysis for react-dev

This analysis was generated by the Next.js Bundle Analysis action. 🤖

This PR introduced no changes to the JavaScript bundle! 🙌

nomandhoni-cs

This comment was marked as outdated.

@@ -4,7 +4,7 @@ title: renderToStaticMarkup

<Intro>

`renderToStaticMarkup` renders a non-interactive React tree to an HTML string.
`renderToStaticMarkup` একটি নন-ইন্টার‌্যাক্টিভ React ট্রি কে একটি HTML স্ট্রিং এ রেন্ডার করে।
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
`renderToStaticMarkup` একটি নন-ইন্টার‌্যাক্টিভ React ট্রি কে একটি HTML স্ট্রিং এ রেন্ডার করে।
`renderToStaticMarkup` একটি নন-ইন্টারেক্টিভ React ট্রি কে একটি HTML স্ট্রিং এ রেন্ডার করে।


```js
import { renderToStaticMarkup } from 'react-dom/server';

const html = renderToStaticMarkup(<Page />);
```

It will produce non-interactive HTML output of your React components.
এটা আপনার React কম্পোনেন্টের নন-ইন্টার‌্যাক্টিভ HTML আউটপুট তৈরি করবে।
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
এটা আপনার React কম্পোনেন্টের নন-ইন্টার‌্যাক্টিভ HTML আউটপুট তৈরি করবে।
এটা আপনার React কম্পোনেন্টের নন-ইন্টারেক্টিভ HTML আউটপুট তৈরি করবে।


### Rendering a non-interactive React tree as HTML to a string {/*rendering-a-non-interactive-react-tree-as-html-to-a-string*/}
### একটি নন-ইন্টার‌্যাক্টিভ React ট্রি কে HTML হিসেবে একটি স্ট্রিং এ রেন্ডার করা {/*rendering-a-non-interactive-react-tree-as-html-to-a-string*/}
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
### একটি নন-ইন্টার‌্যাক্টিভ React ট্রি কে HTML হিসেবে একটি স্ট্রিং এ রেন্ডার করা {/*rendering-a-non-interactive-react-tree-as-html-to-a-string*/}
### একটি নন-ইন্টারেক্টিভ React ট্রি কে HTML হিসেবে একটি স্ট্রিং এ রেন্ডার করা {/*rendering-a-non-interactive-react-tree-as-html-to-a-string*/}

app.use('/', (request, response) => {
const html = renderToStaticMarkup(<Page />);
response.send(html);
});
```

This will produce the initial non-interactive HTML output of your React components.
এটা আপনার React কম্পোনেন্টের প্রাথমিক নন-ইন্টার‌্যাক্টিভ HTML আউটপুট তৈরি করবে।
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
এটা আপনার React কম্পোনেন্টের প্রাথমিক নন-ইন্টার‌্যাক্টিভ HTML আউটপুট তৈরি করবে।
এটা আপনার React কম্পোনেন্টের প্রাথমিক নন-ইন্টারেক্টিভ HTML আউটপুট তৈরি করবে।


<Pitfall>

This method renders **non-interactive HTML that cannot be hydrated.** This is useful if you want to use React as a simple static page generator, or if you're rendering completely static content like emails.
এই মেথডটা রেন্ডার করে **নন-ইন্টার‌্যাক্টিভ HTML যা hydrate করা যায় না।** এটা কাজে লাগে যখন আপনি React কে একটি simple static page generator হিসেবে ব্যবহার করতে চান, অথবা আপনি সম্পূর্ণরূপে স্ট্যাটিক কনটেন্ট যেমন ইমেইল রেন্ডার করছেন।
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
এই মেথডটা রেন্ডার করে **নন-ইন্টার‌্যাক্টিভ HTML যা hydrate করা যায় না।** এটা কাজে লাগে যখন আপনি React কে একটি simple static page generator হিসেবে ব্যবহার করতে চান, অথবা আপনি সম্পূর্ণরূপে স্ট্যাটিক কনটেন্ট যেমন ইমেইল রেন্ডার করছেন।
এই মেথডটা রেন্ডার করে **নন-ইন্টারেক্টিভ HTML যা hydrate করা যায় না।** এটা কাজে লাগে যখন আপনি React কে একটি simple static page generator হিসেবে ব্যবহার করতে চান, অথবা আপনি সম্পূর্ণরূপে স্ট্যাটিক কনটেন্ট যেমন ইমেইল রেন্ডার করছেন।


Interactive apps should use [`renderToString`](/reference/react-dom/server/renderToString) on the server and [`hydrateRoot`](/reference/react-dom/client/hydrateRoot) on the client.
ইন্টার‌্যাক্টিভ অ্যাপের উচিত সার্ভারে [`renderToString`](/reference/react-dom/server/renderToString) ব্যবহার করা এবং ক্লায়েন্টে [`hydrateRoot`](/reference/react-dom/client/hydrateRoot) ব্যবহার করা।
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
ইন্টার‌্যাক্টিভ অ্যাপের উচিত সার্ভারে [`renderToString`](/reference/react-dom/server/renderToString) ব্যবহার করা এবং ক্লায়েন্টে [`hydrateRoot`](/reference/react-dom/client/hydrateRoot) ব্যবহার করা।
ইন্টারেক্টিভ অ্যাপের উচিত সার্ভারে [`renderToString`](/reference/react-dom/server/renderToString) ব্যবহার করা এবং ক্লায়েন্টে [`hydrateRoot`](/reference/react-dom/client/hydrateRoot) ব্যবহার করা।

@nomandhoni-cs
Copy link
Collaborator

@nafistiham Bhai ইন্টার‌্যাক্টিভ spelling ta problem kortese tai ইন্টার‌্যাক্টিভ => ইন্টারেক্টিভ kore diyen

@nafistiham
Copy link
Collaborator Author

@nafistiham Bhai ইন্টার‌্যাক্টিভ spelling ta problem kortese tai ইন্টার‌্যাক্টিভ => ইন্টারেক্টিভ kore diyen

এমনেই ঠিক করা গেছে। সম্ভবত ম্যাকের ইস্যু।
মার্জ করে দিয়েন
@nomandhoni-cs

@nomandhoni-cs nomandhoni-cs added this pull request to the merge queue Jun 23, 2023
Copy link
Collaborator

@nomandhoni-cs nomandhoni-cs left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks to Nafis Bhai

Merged via the queue into reactjs:main with commit 4de9c4e Jun 23, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants