ಕಳೆದ ಕೆಲವು ವಾರಗಳಲ್ಲಿ, ರಿಯಾಕ್ಟ್ ಸರ್ವರ್ ಕಾಂಪೊನೆಂಟ್ಸ್ (RSC) ನಲ್ಲಿ ನಿರ್ಣಾಯಕ ಭದ್ರತಾ ದುರ್ಬಲತೆಯ ಬಹಿರಂಗಪಡಿಸುವಿಕೆಯ ನಂತರ, RSC ಪ್ರೋಟೋಕಾಲ್ ಬಹಳಷ್ಟು ಗಮನವನ್ನು ಪಡೆದುಕೊಂಡಿದೆ.
RSC ಪ್ರೋಟೋಕಾಲ್ ಎನ್ನುವುದು ರಿಯಾಕ್ಟ್ ಟ್ರೀಗಳನ್ನು (ಮತ್ತು JSON ಅರೇಗಳು) ರಿಯಾಕ್ಟ್ನಿಂದ ಧಾರಾವಾಹಿ ಮತ್ತು ಡಿ-ಸೀರಿಯಲ್ ಆಗಿರುವ ಸ್ವರೂಪವಾಗಿದೆ. RSC ಪ್ರೋಟೋಕಾಲ್ಗಾಗಿ ರಿಯಾಕ್ಟ್ ಒಬ್ಬ ಬರಹಗಾರ ಮತ್ತು ಓದುಗ ಎರಡನ್ನೂ ಒದಗಿಸುತ್ತದೆ, ಅದನ್ನು ಆವೃತ್ತಿ ಮತ್ತು ಪರಸ್ಪರ ವಿಕಸನಗೊಳಿಸಬಹುದು.
ಏಕೆಂದರೆ RSC ಪ್ರೋಟೋಕಾಲ್ ಒಂದೇ ಆಗಿರುತ್ತದೆ ಅನುಷ್ಠಾನದ ವಿವರಗಳು ರಿಯಾಕ್ಟ್, ಇದು ಮೂಲ ಕೋಡ್ನ ಹೊರಗೆ ಸ್ಪಷ್ಟವಾಗಿ ದಾಖಲಿಸಲ್ಪಟ್ಟಿಲ್ಲ. ಈ ವಿಧಾನದ ಪ್ರಯೋಜನವೆಂದರೆ ರಿಯಾಕ್ಟ್ ಸ್ವರೂಪವನ್ನು ಸುಧಾರಿಸಲು ಮತ್ತು ಅದಕ್ಕೆ ಹೊಸ ವೈಶಿಷ್ಟ್ಯಗಳು ಮತ್ತು ಆಪ್ಟಿಮೈಸೇಶನ್ಗಳನ್ನು ಸೇರಿಸಲು ಹಲವು ಅವಕಾಶಗಳನ್ನು ಹೊಂದಿದೆ.
ಆದಾಗ್ಯೂ, ತೊಂದರೆಯೆಂದರೆ, ರಿಯಾಕ್ಟ್ ಸರ್ವರ್ ಕಾಂಪೊನೆಂಟ್ಗಳೊಂದಿಗೆ ಸಕ್ರಿಯವಾಗಿ ಅಪ್ಲಿಕೇಶನ್ಗಳನ್ನು ನಿರ್ಮಿಸುವ ಜನರಿಗೆ ಸಹ ಅದು ಹುಡ್ ಅಡಿಯಲ್ಲಿ ಹೇಗೆ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತದೆ ಎಂದು ತಿಳಿದಿರುವುದಿಲ್ಲ.
ಕೆಲವು ತಿಂಗಳ ಹಿಂದೆ, ಬಳಸಿದ RSC ಪ್ರೋಟೋಕಾಲ್ನ ಹಿಂದಿನ ಕೆಲವು ವಿಚಾರಗಳನ್ನು ವಿವರಿಸಲು ನಾನು ಪ್ರಗತಿಶೀಲ JSON ಅನ್ನು ಬರೆದಿದ್ದೇನೆ. ಆರ್ಎಸ್ಸಿಯನ್ನು ಬಳಸಲು ನೀವು ಅವರನ್ನು ತಿಳಿದುಕೊಳ್ಳಬೇಕಾಗಿಲ್ಲವಾದರೂ, ಹುಡ್ ಅಡಿಯಲ್ಲಿ ನೋಡಲು ಇದು ನಿಜವಾಗಿಯೂ ವಿನೋದ ಮತ್ತು ಶೈಕ್ಷಣಿಕವಾಗಿರುವ ಸಂದರ್ಭಗಳಲ್ಲಿ ಇದು ಒಂದು ಎಂದು ನಾನು ಭಾವಿಸುತ್ತೇನೆ.
ಈಗ ತುಂಬಾ ಗಮನಹರಿಸುವ ಪರಿಸ್ಥಿತಿ ವಿಭಿನ್ನವಾಗಿದೆ ಎಂದು ನಾನು ಬಯಸುತ್ತೇನೆ, ಆದರೆ ಯಾವುದೇ ಸಂದರ್ಭದಲ್ಲಿ, ಆ ಆಸಕ್ತಿಯು ಹೊಸ ಪುಟ್ಟ ವಾದ್ಯವನ್ನು ಮಾಡಲು ನನ್ನನ್ನು ಪ್ರೇರೇಪಿಸಿತು ಅದು ಹೇಗೆ ಕೆಲಸ ಮಾಡುತ್ತದೆ ಎಂಬುದನ್ನು ತೋರಿಸಲು.
ನಾನು ಅದನ್ನು ಕರೆಯುತ್ತೇನೆ RSC ಎಕ್ಸ್ಪ್ಲೋರರ್ಮತ್ತು ನೀವು ಅದನ್ನು ಮಾಡಬಹುದು https://rscexplorer.dev/.
ನಿಸ್ಸಂಶಯವಾಗಿ, ಇದು ಮುಕ್ತ ಮೂಲವಾಗಿದೆ.
“ತೋರಿಸು, ಹೇಳಬೇಡ”, ಅವರು ಹೇಳಿದಂತೆ. ಸರಿ, ಅದು ಎಂಬೆಡ್ ಆಗಿ ಇದೆ.
ಹಲೋ ವರ್ಲ್ಡ್ನೊಂದಿಗೆ ಪ್ರಾರಂಭಿಸೋಣ:
ಯಾವುದೋ ರಹಸ್ಯವನ್ನು ಹೇಳುವ ಹಳದಿ ರೇಖೆಯನ್ನು ಹೈಲೈಟ್ ಮಾಡಿರುವುದನ್ನು ಗಮನಿಸಿ. ನೀವು ಹತ್ತಿರದಿಂದ ನೋಡಿದರೆ, ಅದು represented as a piece of JSON. This line is a part of the RSC stream from the server. That’s how React talks to itself over the network.
Now press the big yellow “step” button!
Notice how now appears on the right. This is the JSX that the client reconstructs after reading this line. We’ve just seen a simple piece of JSX—the tag—cross the network and get revived on the other side.
Well, not really “cross the network”.
One cool thing about RSC Explorer is that it’s a single-page app, i.e. it runs entirely in your browser (more precisely, the Server part runs in a worker). This is why, if you check the Network tab, you’ll see no requests. So in a sense it’s a simulation.
Nevertheless, RSC Explorer is built using exactly the same packages that React provides to read and write the RSC protocol, so every line of the output is real.
Let’s try something slightly more interesting to see streaming in action.
Take this example and press the big yellow “step” button exactly two times:
(If you miscounted, press “restart” on the left, and then “step” two times again.)
Have a look at the upper right pane. You can see three chunks in the RSC protocol format (which, again, you don’t technically need to read—and which changes between versions). On the right, you see what Client React reconstructed so far.
Notice a “hole” in the middle of the streamed tree, visualized as a “Pending” pill.
By default, React would not show an inconsistent UI with “holes”. However, since you’ve declared a loading state with is already visible but
"ಹಂತ" ಗುಂಡಿಯನ್ನು ಮತ್ತೊಮ್ಮೆ ಒತ್ತಿ ಮತ್ತು "ರಂಧ್ರ" ತುಂಬುತ್ತದೆ.
ಇಲ್ಲಿಯವರೆಗೆ, ನಾವು ಮಾತ್ರ ಕಳುಹಿಸಿದ್ದೇವೆ ಮಾಹಿತಿ ಗ್ರಾಹಕನಿಗೆ; ಈಗ ಸ್ವಲ್ಪ ಕಳುಹಿಸೋಣ ಕೋಡ್.
ಕ್ಲಾಸಿಕ್ ಉದಾಹರಣೆಯಾಗಿ ಕ್ಯಾಲ್ಕುಲೇಟರ್ ಅನ್ನು ಬಳಸೋಣ.
ದೊಡ್ಡ ಹಳದಿ "ಹಂತ" ಬಟನ್ ಅನ್ನು ಎರಡು ಬಾರಿ ಕ್ಲಿಕ್ ಮಾಡಿ:
ಇದು ಕೇವಲ ಉತ್ತಮ ಹಳೆಯ ಕ್ಯಾಲ್ಕುಲೇಟರ್, ಇಲ್ಲಿ ಅಲಂಕಾರಿಕ ಏನೂ ಇಲ್ಲ.
ಅಥವಾ ಇದೆಯೇ?
ಪ್ರೋಟೋಕಾಲ್ ಓವರ್ಹೆಡ್ ನೋಡಿ. ಇದು ಓದಲು ಸ್ವಲ್ಪ ಕಷ್ಟ, ಆದರೆ ನಾವು ಸ್ಟ್ರಿಂಗ್ ಅನ್ನು ಕಳುಹಿಸುವುದಿಲ್ಲ ಎಂಬುದನ್ನು ಗಮನಿಸಿ "Count: 0" ಅಥವಾ s, ಅಥವಾ ಯಾವುದೇ HTML. ನಾವು ಕಳುಹಿಸುತ್ತೇವೆ
API ಮಾರ್ಗಗಳಿಂದ ನಾವು ರಿಯಾಕ್ಟ್ ಟ್ರೀಗಳನ್ನು ಹಿಂದಿರುಗಿಸುವುದು ಹೀಗೆ.
ಹೇಗೆ ಎಂಬುದನ್ನು ಗಮನಿಸಿ Counter ಉಲ್ಲೇಖವಾಗುತ್ತದೆ ["client",[],"Counter"] ಆರ್ಎಸ್ಸಿ ಪ್ರೋಟೋಕಾಲ್ನಲ್ಲಿ, "ಹಿಡಿತವನ್ನು ಪಡೆದುಕೊಳ್ಳಿ Counter ನಿಂದ ರಫ್ತು client ಮಾಡ್ಯೂಲ್". ನೈಜ ಚೌಕಟ್ಟಿನಲ್ಲಿ, ಇದನ್ನು ಬಂಡ್ಲರ್ನಿಂದ ಮಾಡಲಾಗುತ್ತದೆ, ಆದ್ದರಿಂದ RSC ಪ್ಯಾಕೇಜ್ಗಳೊಂದಿಗೆ ಸಂಯೋಜಿಸುತ್ತದೆ. ನೀವು ವೆಬ್ಪ್ಯಾಕ್ನೊಂದಿಗೆ ಪರಿಚಿತರಾಗಿದ್ದರೆ, ಇದು ವೆಬ್ಪ್ಯಾಕ್ ಸಂಗ್ರಹದಿಂದ ಓದುವಂತೆಯೇ ಇರುತ್ತದೆ. (ವಾಸ್ತವವಾಗಿ RSC ಎಕ್ಸ್ಪ್ಲೋರರ್ ಇದನ್ನು ಹೇಗೆ ಕಾರ್ಯಗತಗೊಳಿಸುತ್ತದೆ.)
ನಾವು ಈಗ ಸರ್ವರ್ ಅನ್ನು ನೋಡಿದ್ದೇವೆ ಸೂಚಿಸುತ್ತದೆ ಕ್ಲೈಂಟ್ನಿಂದ ಬಹಿರಂಗಗೊಂಡ ಕೋಡ್ನ ತುಣುಕಿಗೆ.
ಈಗ ಕ್ಲೈಂಟ್ ಅನ್ನು ನೋಡೋಣ ಸೂಚಿಸುತ್ತದೆ ಸರ್ವರ್ನಿಂದ ಬಹಿರಂಗಗೊಂಡ ಕೋಡ್ನ ತುಣುಕಿಗೆ.
ಇಲ್ಲಿ, greet a ಆಗಿದೆ ಸರ್ವರ್ ಕ್ರಿಯೆಜೊತೆಗೆ 'use server' ಅಂತಿಮ ಹಂತವಾಗಿ. ಇದನ್ನು ಕ್ಲೈಂಟ್ಗೆ ಬೆಂಬಲವಾಗಿ ವಿತರಿಸಲಾಗುತ್ತದೆ Form ಇದು ಒಂದು ಎಂದು ಘಟಕ async ಕಾರ್ಯ
ದೊಡ್ಡ ಹಳದಿ "ಹಂತ" ಬಟನ್ ಅನ್ನು ಮೂರು ಬಾರಿ ಕ್ಲಿಕ್ ಮಾಡಿ:
ಈಗ ಪೂರ್ವವೀಕ್ಷಣೆ ಫಲಕದಲ್ಲಿ ನಿಮ್ಮ ಹೆಸರನ್ನು ನಮೂದಿಸಿ ಮತ್ತು "ಹಲೋ" ಕ್ಲಿಕ್ ಮಾಡಿ. RSC ಎಕ್ಸ್ಪ್ಲೋರರ್ ಡೀಬಗರ್ ಮತ್ತೊಮ್ಮೆ "ವಿರಾಮಗೊಳಿಸುತ್ತದೆ", ನಾವು ಅದರ ಮೇಲೆ ಕ್ಲಿಕ್ ಮಾಡಿದ್ದೇವೆ ಎಂದು ಸೂಚಿಸುತ್ತದೆ greet ವಿನಂತಿಯ ಮೇರೆಗೆ ಸರ್ವರ್ ಕ್ರಿಯೆ. ಗ್ರಾಹಕರಿಗೆ ಪ್ರತಿಕ್ರಿಯೆಯನ್ನು ವೀಕ್ಷಿಸಲು ಹಳದಿ "ಹಂತ" ಬಟನ್ ಅನ್ನು ಕ್ಲಿಕ್ ಮಾಡಿ.
RSC ಅನ್ನು ಸಾಮಾನ್ಯವಾಗಿ ಚೌಕಟ್ಟಿನೊಂದಿಗೆ ಕಲಿಸಲಾಗುತ್ತದೆ, ಆದರೆ ಅದು ಏನು ನಡೆಯುತ್ತಿದೆ ಎಂಬುದನ್ನು ಮರೆಮಾಡುತ್ತದೆ. ಉದಾಹರಣೆಗೆ, ಫ್ರೇಮ್ವರ್ಕ್ ಸರ್ವರ್ ವಿಷಯವನ್ನು ಹೇಗೆ ನವೀಕರಿಸುತ್ತದೆ? ರೂಟರ್ ಹೇಗೆ ಕೆಲಸ ಮಾಡುತ್ತದೆ?
RSC ಎಕ್ಸ್ಪ್ಲೋರರ್ ಪ್ರದರ್ಶನಗಳು ಫ್ರೇಮ್ ಇಲ್ಲದ RSC. ಇಲ್ಲ router.refresh- ಆದರೆ ನೀವೇ ಅದನ್ನು ಮಾಡಬಹುದು refresh ಸರ್ವರ್ ಕ್ರಿಯೆ ಮತ್ತು ಎ Router ಘಟಕ.
ಪರದೆಯ ಮೇಲೆ ಸಂಪೂರ್ಣ ಆರಂಭಿಕ ಇಂಟರ್ಫೇಸ್ ಅನ್ನು ಕಂಡುಹಿಡಿಯಲು "ಹಂತ" ಬಟನ್ ಅನ್ನು ಪದೇ ಪದೇ ಕ್ಲಿಕ್ ಮಾಡಿ:
ಟಿಕ್ ಮಾಡುವ ಟೈಮರ್ ಅನ್ನು ನೋಡಿ. ಹೇಗೆ ಎಂಬುದನ್ನು ಗಮನಿಸಿ ColorTimer ಸರ್ವರ್ನಿಂದ ಯಾದೃಚ್ಛಿಕ ಬಣ್ಣಕ್ಕೆ ಘಟಕ Timer ಕ್ಲೈಂಟ್ನಲ್ಲಿನ ಘಟಕ. ಮತ್ತೆ, ಇದು ಸರ್ವರ್ ಅನ್ನು ಹೊಂದಿದೆ ಮರಳಿದರು
ಈಗ ಟೈಮರ್ನ ಮೇಲಿರುವ ಅಪ್ಡೇಟ್ ಬಟನ್ ಒತ್ತಿರಿ.
ಕೋಡ್ ಅನ್ನು ಅಗೆಯದೆಯೇ, ಸರ್ವರ್ನ ಪ್ರತಿಕ್ರಿಯೆಯ ಮೂಲಕ "ಹೆಜ್ಜೆ" ಮಾಡಿ ಮತ್ತು ಏನಾಗುತ್ತದೆ ಎಂಬುದನ್ನು ನೋಡಿ. ನೀವು ಸ್ಥಿರವಾದ ಬೀಟ್ ಅನ್ನು ನೋಡಬೇಕು Timer ಸರ್ವರ್ನಿಂದ ಹೊಸ ರುಜುವಾತುಗಳನ್ನು ಪಡೆಯಿರಿ. ಅದರ ಹಿನ್ನೆಲೆ ಬಣ್ಣ ಬದಲಾಗುತ್ತದೆ, ಆದರೆ ಅದರ ಸ್ಥಿತಿಯನ್ನು ಸಂರಕ್ಷಿಸಲಾಗಿದೆ!
ಒಂದು ಅರ್ಥದಲ್ಲಿ, ಇದು ಸಾಮಾನ್ಯ ರಿಯಾಕ್ಟ್ "ವರ್ಚುವಲ್ DOM" ನವೀಕರಣವನ್ನು ಹೊರತುಪಡಿಸಿ, htmx ನಂತಹದನ್ನು ಬಳಸಿಕೊಂಡು HTML ಅನ್ನು ಮರುಫಲಕ ಮಾಡುವಂತಿದೆ, ಆದ್ದರಿಂದ ಇದು ಸ್ಥಿತಿಯನ್ನು ತೆಗೆದುಹಾಕುವುದಿಲ್ಲ. ಇದು ಸರ್ವರ್ನಿಂದ ಹೊಸ ರುಜುವಾತುಗಳನ್ನು ಸ್ವೀಕರಿಸುತ್ತದೆ. "ರಿಫ್ರೆಶ್" ಅನ್ನು ಕೆಲವು ಬಾರಿ ಕ್ಲಿಕ್ ಮಾಡಿ ಮತ್ತು ಅದರ ಮೂಲಕ ಹೋಗಿ.
ಹುಡ್ ಅಡಿಯಲ್ಲಿ ಇದು ಹೇಗೆ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತದೆ ಎಂಬುದನ್ನು ನೀವು ನೋಡಲು ಬಯಸಿದರೆ, ಸರ್ವರ್ ಮತ್ತು ಕ್ಲೈಂಟ್ ಭಾಗಗಳಿಗೆ ಕೆಳಗೆ ಸ್ಕ್ರಾಲ್ ಮಾಡಿ. ಸಂಕ್ಷಿಪ್ತವಾಗಿ, ಗ್ರಾಹಕ Router JSX ಸರ್ವರ್ಗೆ ಭರವಸೆ ನೀಡುತ್ತದೆ, ಅದನ್ನು ಹಿಂತಿರುಗಿಸಲಾಗುತ್ತದೆ renderPage(). ಆರಂಭದಲ್ಲಿ, renderPage() ಸರ್ವರ್ಗೆ (ಪ್ರದರ್ಶನದ ಮೊದಲ ಔಟ್ಪುಟ್ಗಾಗಿ) ಮತ್ತು ನಂತರ ಅದನ್ನು ಕ್ಲೈಂಟ್ನಿಂದ (ಮರುಪಂದ್ಯಕ್ಕಾಗಿ) ಕರೆಯಲಾಗುತ್ತದೆ.
ಈ ತಂತ್ರವು URL ಹೊಂದಾಣಿಕೆ ಮತ್ತು ಗೂಡುಕಟ್ಟುವ ಜೊತೆಗೆ, RSC ಚೌಕಟ್ಟುಗಳು ರೂಟಿಂಗ್ ಅನ್ನು ಹೇಗೆ ನಿರ್ವಹಿಸುತ್ತವೆ. ಇದು ಉತ್ತಮ ಉದಾಹರಣೆ ಎಂದು ನಾನು ಭಾವಿಸುತ್ತೇನೆ!
ಕುತೂಹಲಕ್ಕಾಗಿ ನಾನು ಇನ್ನೂ ಕೆಲವು ಉದಾಹರಣೆಗಳನ್ನು ಸೇರಿಸಿದ್ದೇನೆ:
ಮತ್ತು, ಸಹಜವಾಗಿ, ಕುಖ್ಯಾತ:
(ನೀವು ನಿರೀಕ್ಷಿಸಿದಂತೆ, ಇದು ದುರ್ಬಲ ಆವೃತ್ತಿಗಳಲ್ಲಿ ಮಾತ್ರ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತದೆ, ಆದ್ದರಿಂದ ಇದು ನಿಜವಾಗಿ ಕಾರ್ಯನಿರ್ವಹಿಸಲು ನೀವು ಮೇಲಿನ ಬಲ ಮೂಲೆಯಲ್ಲಿ 19.2.0 ಅನ್ನು ಆಯ್ಕೆ ಮಾಡಬೇಕಾಗುತ್ತದೆ.)
ಸಮುದಾಯದಿಂದ ಮಾಡಿದ ಕೆಲವು ಉತ್ತಮ RSC ಉದಾಹರಣೆಗಳನ್ನು ನೋಡಲು ನಾನು ಇಷ್ಟಪಡುತ್ತೇನೆ.
RSC ಎಕ್ಸ್ಪ್ಲೋರರ್ ನಿಮಗೆ ಇತರ ಪುಟಗಳಲ್ಲಿ ತುಣುಕುಗಳನ್ನು ಎಂಬೆಡ್ ಮಾಡಲು ಅನುಮತಿಸುತ್ತದೆ (ನಾನು ಈ ಲೇಖನದಲ್ಲಿ ಮಾಡಿದಂತೆ) ಮತ್ತು ಹಂಚಿದ ಲಿಂಕ್ಗಳನ್ನು ರಚಿಸಲು, ಕೋಡ್ ಸ್ವತಃ URL ಮಿತಿಗಿಂತ ದೊಡ್ಡದಾಗಿರುವುದಿಲ್ಲ. ಉಪಕರಣವು ಸಂಪೂರ್ಣವಾಗಿ ಕ್ಲೈಂಟ್-ಸೈಡ್ ಆಗಿದೆ ಮತ್ತು ನಾನು ಅದನ್ನು ಸರಳವಾಗಿ ಇರಿಸಲು ಉದ್ದೇಶಿಸಿದೆ.
Tangled ಅಥವಾ GitHub ನಲ್ಲಿ ಅದರ ಮೂಲ ಕೋಡ್ ಅನ್ನು ಬ್ರೌಸ್ ಮಾಡಲು ನಿಮಗೆ ಹೆಚ್ಚು ಸ್ವಾಗತವಿದೆ. ಇದು ಹವ್ಯಾಸ ಯೋಜನೆಯಾಗಿದೆ, ಆದ್ದರಿಂದ ನಾನು ನಿರ್ದಿಷ್ಟವಾಗಿ ಏನನ್ನೂ ಭರವಸೆ ನೀಡಲು ಸಾಧ್ಯವಿಲ್ಲ, ಆದರೆ ಇದು ಉಪಯುಕ್ತವಾಗಿದೆ ಎಂದು ನಾನು ಭಾವಿಸುತ್ತೇನೆ.
ಇದನ್ನು ಪರಿಶೀಲಿಸಿದ್ದಕ್ಕಾಗಿ ಧನ್ಯವಾದಗಳು!
Leave a Reply