8 |
13 |
29 | @PopularMovie.Title
9 |10 | @DateTime.Parse(PopularMovie.ReleaseDate).ToString("MMM dd yyy") 11 |
12 |10 | @DateTime.Parse(PopularMovie.ReleaseDate).ToString("MMM dd yyy") 11 |
12 |
35 | 40 | 41 |
42 |38 | @MovieDetails.Overview 39 |
40 | 41 |21 | 22 |
23 | 24 |(No rendering attribute)
13 | 15 | This page is fully server-side rendered and serves static HTML. 16 | When navigating to /movies/ssr, before you see any page response the OnInitializedAsync method has to complete. 17 |
18 |19 | SSR render pages return the entire HTML and CSS to the browser. It behaves and operates like an normal webapge. 20 | To see changes you must hit refresh it does not keep any connection the server. 21 |
22 |23 | The "More Info" button will fetch the details of that movie and display it in a modal. 24 | This happens as the result of an onclick handler calling a JavaScript function to manipulate the DOM on the modal. 25 | JavaScript is needed for any client side interaction when using SSR. 26 |
27 | 28 |@("@attribute [StreamRendering]")
33 | 35 | This page is server-side rendered using streaming rendering. This means the server 36 | will send you some HTML immediately and leave the HTTP response stream open until 37 | any async operations complete, then send you updated HTML. The updated HTML will be patched 38 | into the DOM by Blazor, rather than reloading the page. 39 |
40 |41 | In this case, you'll see placeholder content while the server fetches movies 42 | from TMDB and sends an update with the completed page. To see this happen more 43 | clearly, uncomment the delay in MovieListStreamRendering.razor. 44 |
45 |46 | The "More Info" button is still achieved using JavaScript exactly like the SSR mode. 47 | Stream Rendering is an enhancement of plain SSR, so any interactive elements of the 48 | page after it has reached the browser must still be handled with JavaScript. 49 |
50 | 51 |@("@rendermode RenderMode.InteractiveServer")
85 | 87 | This page uses interactive Blazor components using the Interactive Server Render Mode. This means the page 88 | and its DOM is rendered on the server, but the server keeps track of the DOM and processes events 89 | sent from the browser and dynamically updates the page without needing any sort of page refresh. 90 | Real-time updates are streamed to the browser via the SignalR connection, and user interactions are 91 | streamed to the server via the same connection. 92 |
93 |94 | In this case, the "More Info" button will fetch the details of that movie and display it in a modal. 95 | This happens as the result of an EventCallback parameter passed to the MovieCard component using an 96 | onclick listener, something usually only possible via JavaScript. No JavaScript is needed to display the modal. 97 | Because this code is running entirely on the server, the request to TMDB's API is also made on the server, 98 | keeping the API key secret from the client. The client also cannot see or modify the code that is executed, 99 | since it is completely on the server. 100 |
101 |102 | Note: There is a delay when navigating to this page as the SignalR connection is established. If the connection 103 | is lost or times out, the page will become unresponsive. Typically an error page is displayed. This behavior can be 104 | overridden with JavaScript. JavaScript can be used to refresh the connection if the connection is 105 | lost to keep the page alive or routed to another endpoint like logout or an index. 106 |
107 |@("@rendermode RenderMode.InteractiveWebAssembly")
137 | 139 | This page uses interactive Blazor components in Web Assembly. This page will be pre-rendered on the 140 | server, but it runs interactively on the client in WASM. 141 |
142 |143 | In this case, the "More Info" button will fetch the details of that movie and display it in a modal, 144 | just like the SignalR component. However, since this is running on the client, there is a minimal API 145 | mapped in the server's Program.cs. The WASM component sends a request to our server, which in turn uses 146 | the server's API key to send a request to TMDB's API. 147 |
148 |149 | The WASM component is also able to use JavaScript to manipulate the DOM, just like the SSR and SignalR, 150 | using JSInterop. The WASM component's code is sent to the client, so a malicious user could potentially 151 | see and modify the code it contains. 152 |
153 |@("@rendermode RenderMode.InteractiveAuto")
158 | 160 | This is the same component used in the WASM page, but now the framework decides where it runs. Sometimes 161 | via SignalR, other times in WASM. Blazor attempts to render the component in whatever mode is fastest. 162 | In testing, the first time the page loads it is typically in SignalR as the WASM code and runtime are 163 | downloaded, and a reload will typically switch over to WASM execution. 164 |
165 |
166 | The component has a Console.WriteLine() that runs after it renders. If it's running in WASM,
167 | you'll see the message logged in the JavaScript console. If it's running via SignalR, the message will be
168 | logged in the server's terminal output.
169 |
171 | Because this component may execute in WASM, it must be written with the same considerations as a 172 | WASM-only component. This means that any code or resources in the component may be available to the client, 173 |
174 |
](https://www.youtube.com/watch?v=u4azTLLGt8U "Blazor Render Modes")
49 |
50 | ## SSR Walkthrough Video
51 | [
](https://www.youtube.com/watch?v=2kGR1lgEL50 "Blazor Render Modes")
52 |
53 |
--------------------------------------------------------------------------------