[Blazor] Provide guidance about prerendering and flashing UI

[javiercn]

When the app prerenders it waits until the first meaningful paint to produce the HTML.
When the browser connects to the client it produces a render as fast as possible, without waiting for the content to be retrieved from async sources like the database.
This results in a visible flash in the UI where the prerendered data disappears and the component renders something else until the data comes back and the first meaningful client-side paint occurs.

We should provide customers with guidance on how to design/build their applications so that they can avoid this flashing behavior.

[javiercn]

For server-side blazor the guidance is:

• Pass in an identifier that can be used to cache the state during prerendering and to retrieve the state after the app restarts.
• Use that identifier during prerendering to save your component state.
• Use that identifier after prerendering to retrieve the cached state.

Here it is an updated WeatherForecastService that avoids flashing on the UI

        public WeatherForecastService(IMemoryCache memoryCache)
        {
            MemoryCache = memoryCache;
        }
        
        public IMemoryCache MemoryCache { get; }

        public Task<WeatherForecast[]> GetForecastAsync(DateTime startDate)
        {
            return MemoryCache.GetOrCreateAsync(startDate, async e =>
             {
                 e.SetOptions(new MemoryCacheEntryOptions { AbsoluteExpirationRelativeToNow = TimeSpan.FromSeconds(30) });
                 var rng = new Random();
                 await Task.Delay(TimeSpan.FromSeconds(10));
                 return Enumerable.Range(1, 5).Select(index => new WeatherForecast
                 {
                     Date = startDate.AddDays(index),
                     TemperatureC = rng.Next(-20, 55),
                     Summary = Summaries[rng.Next(Summaries.Length)]
                 }).ToArray();
             });
        }

        private static readonly string[] Summaries = new[]
        {
            "Freezing", "Bracing", "Chilly", "Cool", "Mild", "Warm", "Balmy", "Hot", "Sweltering", "Scorching"
        };

[Karluzo]

I do not understand meaning of the line

await Task.Delay(TimeSpan.FromSeconds(10));

I have tried the solution and it does not prevent UI flashing, it only makes it faster.

[guardrex]

@Karluzo We don't work closed issues/PRs. Please open a new issue using the This Page feedback button+form at the bottom of the Hosting Models topic.

Reference this issue (paste in #15272 ... the PR number) in the comment to cross-reference the work and this issue.