RFC: Implement Prerender for older Browsers and Google RFC2021-03

[iJungleboy]

We just published our first simple Oqtane site and tried to see what google would see - it's an empty page. I assume this is also what older browsers would get and makes Oqtane sites impossible to get into google. I'm aware that this is not the primary use case as of now, but I believe it would be great to enable this - and I think it's not too hard.

I did some research and found out that it should be fairly easy to enable Prerendering in Blazor:

• https://docs.microsoft.com/en-us/aspnet/core/blazor/components/prerendering-and-integration
• https://andrewlock.net/enabling-prerendering-for-blazor-webassembly-apps/

From my understanding it would take a bit of work, but I believe it could be done in a day or so. We (2sic) would also volunteer to spearhead this if this would make it into Oqtane once it works.

What are other opinions on this?

[rodrigoratan]

I always avoided SPA frameworks like Angular because of bad SEO/Crawler compatibility. If Blazor does support pre-rendering then it would be great if Oqtane also support it.

[nicpitsch]

Could be related to discussion Oqtane runtime configuration #1223 - just for your information.

With 2sxc 12 Hybrid for Oqtane #1312 Oqtane has become a CMS too ;-)

[iJungleboy]

@nicpitsch your link to Oqtane runtime doesn't work, but I assume you meant the WebAssembly vs. Server part. That's not it. Even the Server implementation still gives the browser an empty page and then retrieves the HTML through WebSockets.

You can check out https://oqtane.me/ - we just created it to provide the public test addresses like mysite.oqtane.me pointing to localhost. If you put it into PageSpeed google reports an empty page or an error.

[nicpitsch]

sorry, I have updated the links pointing to the discussions.

[erikvb]

I would strongly support this. The fact that Oqtane is first and foremost an application framework, doesn't mean it should not support prerendering. This is not only good for the oddball that DOES want to use as a CMS, but also even for internal enterprise use, where a company crawler may visit an application to show the most recent screenshots in a library of apps etc etc.

[sbwalker]

As I mentioned in #1233 I recently did some testing and changed the render-mode in _Host.cshtml from

    <app>
        <component type="typeof(Oqtane.App)" render-mode="Server" />
    </app>

to

    <app>
        <component type="typeof(Oqtane.App)" render-mode="ServerPrerendered" />
    </app>

and the framework ran just fine without any errors or behavioral issues - and produced pre-rendered output. I do not see any reason to prevent making this change in Oqtane.

Note that .NET6 will take this even further... which is something that can be considered when NET6 actually ships: https://jonhilton.net/blazor-prerendering-net6/

[sbwalker]

Done in #1338

[sbwalker]

So I just noticed that Oqtane has pre-rendering issues when running on WebAssembly ( Server is fine ) - so I added logic to work around this for now but it will need further investigation.

[iJungleboy]

This is really awesome - thx! Can't wait to try!

[sbwalker]

@iJungleboy I should note that after the introduction of prerendering for Blazor Server there is a noticeable "flash" in the browser when you start up the application. This is a well documented behavioral issue for Blazor in .NET5 - it is mentioned in the article I linked above. Please let me know your thoughts. I assume the benefits of having prerendered content for SEO, etc... outweigh the impact on the user experience when launching the app? Perhaps an appsetting may be a good option here to provide more control.

[iJungleboy]

@sbwalker I'm aware of the flash issue - which is anticipated to be fixed by .net 6.

I assume a perfect solution would be to detect if it's a robot and use prerender - but for such features I also believe it's better to await .net 6 and see where that leads us.

I must admit I'm surprised by the timing difference with prerender and not. At least on an empty oqtane the content with prerender feels immediate - which is great - whereas even server-rendering takes a few seconds - which is surprising as it's the same work done - but with quite a delay.

Note that I haven't been able to run it on my test-production site httsp://oqtane.me as the update to the current 2.1 failed - It only wanted to create new DBs, so I assume that's still WIP.

[leigh-pointer]

the update to the current 2.1 failed

same here, had to rollback

But, fresh install runs ok.

[sbwalker]

@leigh-pointer @iJungleboy did you manually set the new DatabaseType property in appsettings.json before attempting the upgrade?

[leigh-pointer]

@sbwalker yes. and on another install (2.1) the DBT was already there from the initial setup

[sbwalker]

@leigh-pointer I think I might have an idea on what is causing this... we recently modularized each database provider so that they can be installed independently ( ie. so that if you are not using a specific database provider it will not consume any system resources ). This is working for new installs... but for upgrades where you are already using either LocalDB or SQL Server from a past installation, I have a feeling that it is not ensuring the provider is installed before proceeding. Perhaps @cnurse can confirm.

[sbwalker]

@iJungleboy please test an upgrade again using the latest code. One item to note is that Oqtane does not currently contain logic to modify the appsettings.json automatically on upgrade - in general the philosophy has been to minimize the usage of appsettings but it is not always possible. Since there are some new settings in 2.1 you will need to add them to your own appsettings.json file manually. This is yet another area that will need to be addressed before the 2.1 release is ready ( there is already infrastructure support for this via the UpgradeManager class - the logic just needs to be added for the 2.1.0 version )

[iJungleboy]

@sbwalker & @cnurse I wasn't able to get this to work.

Basically I updated my appsettings.json like this:

{
  "Database": {
    "DatabaseType": "Oqtane.Database.SqlServer.SqlServerDatabase, Oqtane.Database.SqlServer"
  },

  "ConnectionStrings": {
    "DefaultConnection": "Data Source=.\\SQL2017;Initial Catalog=oqtane.me;User ID=oqtane.me;Password=password-that-works"
  },
  "Runtime": "Server",
  "Installation": {
    "DefaultAlias": "",
    "HostPassword": "",
    "HostEmail": "",
    "SiteTemplate": "",
    "DefaultTheme": "",
    "DefaultLayout": "",
    "DefaultContainer": ""
  },
  "Localization": {
    "DefaultCulture": "en-US",
    "SupportedCultures": [
      "en-US",
      "de-DE"
    ]
  },
    "AvailableDatabases": [
    {
      "Name": "LocalDB",
      "FriendlyName": "Local Database",
      "ControlType": "Oqtane.Installer.Controls.LocalDBConfig, Oqtane.Client",
      "DBType": "Oqtane.Database.SqlServer.SqlServerDatabase, Oqtane.Database.SqlServer",
      "Package": "Oqtane.Database.SqlServer"
    },
    {
      "Name": "SqlServer",
      "FriendlyName": "SQL Server",
      "ControlType": "Oqtane.Installer.Controls.SqlServerConfig, Oqtane.Client",
      "DBType": "Oqtane.Database.SqlServer.SqlServerDatabase, Oqtane.Database.SqlServer",
      "Package": "Oqtane.Database.SqlServer"
    },
    {
      "Name": "Sqlite",
      "FriendlyName": "Sqlite",
      "ControlType": "Oqtane.Installer.Controls.SqliteConfig, Oqtane.Client",
      "DBType": "Oqtane.Database.Sqlite.SqliteDatabase, Oqtane.Database.Sqlite",
      "Package": "Oqtane.Database.Sqlite"
    },
    {
      "Name": "MySQL",
      "FriendlyName": "MySQL",
      "ControlType": "Oqtane.Installer.Controls.MySQLConfig, Oqtane.Client",
      "DBType": "Oqtane.Database.MySQL.MySQLDatabase, Oqtane.Database.MySQL",
      "Package": "Oqtane.Database.MySQL"
    },
    {
      "Name": "PostgreSQL",
      "FriendlyName": "PostgreSQL",
      "ControlType": "Oqtane.Installer.Controls.PostgreSQLConfig, Oqtane.Client",
      "DBType": "Oqtane.Database.PostgreSQL.PostgreSQLDatabase, Oqtane.Database.PostgreSQL",
      "Package": "Oqtane.Database.PostgreSQL"
    }
  ]

}

Then I get this error in the logs:

Loaded : Oqtane.Server.Views, Version=2.0.2.0, Culture=neutral, PublicKeyToken=null
Loaded : Oqtane.Upgrade, Version=2.0.2.0, Culture=neutral, PublicKeyToken=null
Loaded : ToSic.Imageflow.Oqt.Server.Oqtane, Version=1.0.3.0, Culture=neutral, PublicKeyToken=null
Loaded : ToSic.Sxc.Oqtane.Client, Version=12.0.0.0, Culture=neutral, PublicKeyToken=null
Loaded : ToSic.Sxc.Oqtane.Server, Version=12.0.0.0, Culture=neutral, PublicKeyToken=null
Loaded : ToSic.Sxc.Oqtane.Shared, Version=12.0.0.0, Culture=neutral, PublicKeyToken=null
Not Assembly : Oqtane.Database.SqlServer.dll
Failed : 
System.IO.FileNotFoundException: Could not find file 'P:\Projects\oqtane.me\Web\Oqtane.Database.SqlServer.dll'.
File name: 'P:\Projects\oqtane.me\Web\Oqtane.Database.SqlServer.dll'
   at System.IO.FileStream.ValidateFileHandle(SafeFileHandle fileHandle)
   at System.IO.FileStream.CreateFileOpenHandle(FileMode mode, FileShare share, FileOptions options)
   at System.IO.FileStream..ctor(String path, FileMode mode, FileAccess access, FileShare share, Int32 bufferSize, FileOptions options)
   at System.IO.File.ReadAllBytes(String path)
   at System.Reflection.AssemblyExtensions.LoadOqtaneAssembly(AssemblyLoadContext loadContext, FileInfo dll, AssemblyName assemblyName) in C:\Projects\Oqtane\oqtane.framework\Oqtane.Shared\Extensions\AssemblyExtensions.cs:line 123
Unhandled exception. System.ArgumentNullException: Value cannot be null. (Parameter 'type')
   at System.Activator.CreateInstance(Type type, Boolean nonPublic, Boolean wrapExceptions)
   at System.Activator.CreateInstance(Type type)
   at Oqtane.Infrastructure.DatabaseManager.GetInstallationContext() in C:\Projects\Oqtane\oqtane.framework\Oqtane.Server\Infrastructure\DatabaseManager.cs:line 682
   at Oqtane.Infrastructure.DatabaseManager.IsInstalled() in C:\Projects\Oqtane\oqtane.framework\Oqtane.Server\Infrastructure\DatabaseManager.cs:line 50
   at Oqtane.Infrastructure.DatabaseManager.Install(InstallConfig install) in C:\Projects\Oqtane\oqtane.framework\Oqtane.Server\Infrastructure\DatabaseManager.cs:line 115
   at Oqtane.Infrastructure.DatabaseManager.Install() in C:\Projects\Oqtane\oqtane.framework\Oqtane.Server\Infrastructure\DatabaseManager.cs:line 74
   at Oqtane.Server.Program.Main(String[] args) in C:\Projects\Oqtane\oqtane.framework\Oqtane.Server\Program.cs:line 18

I then assumed I have to build the DB Solution again, but that fails because it can't find the type MigrationHistoryTable.
This is the latest code I just pulled 2021-05-27 17:30 (Swiss Time)

[sbwalker]

@iJungleboy I just merged some more changes related to automating the upgrade to 2.1.0. In particular, the framework will add the Database and AvailableDatabases sections to appsettings.json automatically if they do not exist ( note that the Database model class was simplified as well ). However, I am not sure if this will address the upgrade issue you described above. I am making some assumptions about how you are attempting to perform the upgrade... but I assume it involves doing a build/publish and copying the contents of the publish folder to your existing installation... and then starting it up. One item which comes to mind is the fact that the database providers in 2.1 are packaged as Nuget packages and are stored in the wwwroot/packages folder ( with extensions of *.nuget.bak ). So when you upgrade your installation you will need to make sure that these files are copied to the same folder in your environment. I am thinking that this may be the problem you encountered with the file not found exception.

[iJungleboy]

Your assumption regarding the install process is correct - build, then copy folders over.

I found out I have to have Packages in wwwroot - that got me the DLL.

I also found out I have to use (instead of DatabaseType:

  "Database": {
    "DefaultDBType": "Oqtane.Database.SqlServer.SqlServerDatabase, Oqtane.Database.SqlServer"
  },

Result: still fails, the install assistant appears and wants to start over.

It also flushes my appsettings.json

[sbwalker]

If you look at https://github.com/oqtane/oqtane.framework/blob/dev/Oqtane.Package/Oqtane.Framework.nuspec you will see that the standard release publishes the items in wwwroot - this is where the Packages folder exists and is how it is included in the release.

The DatabaseType key was changed to DefaultDBType to make it consistent with the DBType field name used in the Database model class and to emphasize that it is the "Master" database type which is used in conjunction with the DefaultConnectionString.

Please explain what you mean by "it flushes" your appsettings.json. The upgrade now contains logic that if the new "Database" or "AvailableDatabases" sections do not exist on startup - it creates them for you automatically.

[leigh-pointer]

Please explain what you mean by "it flushes" your appsettings.json.

When the upgrade fails and returns (for me, to Visual Studio) the appsettings is an empty file wilth just the empty nodes (new install)

[sbwalker]

@leigh-pointer I am able to reproduce the problem... trying to find the solution...

[sbwalker]

@leigh-pointer I resolved the problem... I was able to do an upgrade locally in Visual Studio using the steps above... the PR is merged. Please try again.

[sbwalker]

@iJungleboy upgrades should be working now... you can give it another try - just remember to include wwwroot/ static resources as well

[leigh-pointer]

@sbwalker tried the upgrade and still not finding the DB, however the appsettings is modified and looks ok apart from the Localization Default culture is missing.

`{
"ConnectionStrings": {
"DefaultConnection": "Data Source=LocalHost;Initial Catalog=Oqtane-Framework-202;User ID=Webuser;Password=Pa55word"
},
"Runtime": "Server",
"Installation": {
"DefaultAlias": "",
"HostPassword": "",
"HostEmail": "",
"SiteTemplate": "",
"DefaultTheme": "",
"DefaultLayout": "",
"DefaultContainer": ""
},
"Localization": {
"DefaultCulture": "",
"SupportedCultures": []
},
"Database": {
"DefaultDBType": "Oqtane.Database.SqlServer.SqlServerDatabase, Oqtane.Database.SqlServer"
},
"AvailableDatabases": [
{
"Name": "LocalDB",
"ControlType": "Oqtane.Installer.Controls.LocalDBConfig, Oqtane.Client",
"DBTYpe": "Oqtane.Database.SqlServer.SqlServerDatabase, Oqtane.Database.SqlServer"
},
{
"Name": "SQL Server",
"ControlType": "Oqtane.Installer.Controls.SqlServerConfig, Oqtane.Client",
"DBTYpe": "Oqtane.Database.SqlServer.SqlServerDatabase, Oqtane.Database.SqlServer"
},
{
"Name": "SQLite",
"ControlType": "Oqtane.Installer.Controls.SqliteConfig, Oqtane.Client",
"DBTYpe": "Oqtane.Database.Sqlite.SqliteDatabase, Oqtane.Database.Sqlite"
},
{
"Name": "MySQL",
"ControlType": "Oqtane.Installer.Controls.MySQLConfig, Oqtane.Client",
"DBTYpe": "Oqtane.Database.MySQL.SqlServerDatabase, Oqtane.Database.MySQL"
},
{
"Name": "PostgreSQL",
"ControlType": "Oqtane.Installer.Controls.PostgreSQLConfig, Oqtane.Client",
"DBTYpe": "Oqtane.Database.PostgreSQL.PostgreSQLDatabase, Oqtane.Database.PostgreSQL"
}
]
}

running the project again and still

[iJungleboy]

Upgrade fails - I posted more information on #1419

[leigh-pointer]

Clean 2.1.0 with a 2.0.2 database. Updated the appsettings to reflect the database connection and added the "DefaultDBType": "Oqtane.Database.SqlServer.SqlServerDatabase, Oqtane.Database.SqlServer".

Started VS as waited, for sometime. no response. Entered the local host addess and received.

An error occurred while starting the application.
ArgumentNullException: Value cannot be null. (Parameter 'type')
System.Activator.CreateInstance(Type type, bool nonPublic, bool wrapExceptions)

ArgumentNullException: Value cannot be null. (Parameter 'type')
System.Activator.CreateInstance(Type type, bool nonPublic, bool wrapExceptions)
System.Activator.CreateInstance(Type type)
Oqtane.Infrastructure.DatabaseManager.GetInstallationContext() in DatabaseManager.cs

        var databaseType = _config.GetSection(SettingKeys.DatabaseSection)[SettingKeys.DatabaseTypeKey];
        IDatabase database = null;
        if (!string.IsNullOrEmpty(databaseType))
        {
            var type = Type.GetType(databaseType);
            database = Activator.CreateInstance(type) as IDatabase;
        }
        return new InstallationContext(database, connectionString);
    }
    private string GetInstallationConfig(string key, string defaultValue)

Oqtane.Infrastructure.DatabaseManager.IsInstalled() in DatabaseManager.cs

    {
        var result = new Installation { Success = false, Message = string.Empty };
        if (!string.IsNullOrEmpty(_config.GetConnectionString(SettingKeys.ConnectionStringKey)))
        {
            result.Success = true;
            using (var db = GetInstallationContext())
            {
                if (db.Database.CanConnect())
                {
                    try
                    {
                        var provisioned = db.Tenant.Any();

Oqtane.Infrastructure.DatabaseManager.Install(InstallConfig install) in DatabaseManager.cs

            // on upgrade install the associated Nuget package
            if (!string.IsNullOrEmpty(install.ConnectionString) && Type.GetType(install.DatabaseType) == null)
            {
                InstallDatabase(install);
            }
            var installation = IsInstalled();
            if (!installation.Success)
            {
                install.Aliases = GetInstallationConfig(SettingKeys.DefaultAliasKey, string.Empty);
                install.HostPassword = GetInstallationConfig(SettingKeys.HostPasswordKey, string.Empty);
                install.HostEmail = GetInstallationConfig(SettingKeys.HostEmailKey, string.Empty);

Oqtane.Infrastructure.DatabaseManager.Install() in DatabaseManager.cs

        }
        return result;
    }
    public Installation Install()
    {
        return Install(null);
    }
    public Installation Install(InstallConfig install)
    {
        var result = new Installation { Success = false, Message = string.Empty };

Oqtane.Server.Program.Main(string[] args) in Program.cs

    public static void Main(string[] args)
    {
        var host = BuildWebHost(args);
        using (var serviceScope = host.Services.GetRequiredService<IServiceScopeFactory>().CreateScope())
        {
            var databaseManager = serviceScope.ServiceProvider.GetService<IDatabaseManager>();
            databaseManager.Install();
        }
        host.Run();
    }
    public static IWebHost BuildWebHost(string[] args) =>
        WebHost.CreateDefaultBuilder(args)

Show raw exception details
System.ArgumentNullException: Value cannot be null. (Parameter 'type')
at System.Activator.CreateInstance(Type type, Boolean nonPublic, Boolean wrapExceptions)
at System.Activator.CreateInstance(Type type)
at Oqtane.Infrastructure.DatabaseManager.GetInstallationContext() in G:\StudioElf Git Repositories\oqtane.framework.202\Oqtane.Server\Oqtane.Server\Infrastructure\DatabaseManager.cs:line 645
at Oqtane.Infrastructure.DatabaseManager.IsInstalled() in G:\StudioElf Git Repositories\oqtane.framework.202\Oqtane.Server\Oqtane.Server\Infrastructure\DatabaseManager.cs:line 52
at Oqtane.Infrastructure.DatabaseManager.Install(InstallConfig install) in G:\StudioElf Git Repositories\oqtane.framework.202\Oqtane.Server\Oqtane.Server\Infrastructure\DatabaseManager.cs:line 103
at Oqtane.Infrastructure.DatabaseManager.Install() in G:\StudioElf Git Repositories\oqtane.framework.202\Oqtane.Server\Oqtane.Server\Infrastructure\DatabaseManager.cs:line 76
at Oqtane.Server.Program.Main(String[] args) in G:\StudioElf Git Repositories\oqtane.framework.202\Oqtane.Server\Oqtane.Server\Program.cs:line 18
.NET 5.0.6 X64 v5.0.0.0 | Microsoft.AspNetCore.Hosting version 5.0.6+dc5e11abdb05b322f4b74b3afbcfb352fe984b2e | Microsoft Windows 10.0.19042 | Need help?

[sbwalker]

@leigh-pointer i will create a new thread as this post was not intended for upgrade issues